zoukankan      html  css  js  c++  java
  • Angular中的routerLink 跳转页面和默认路由

    1.创建新项目

    2.创建home news newscontent 组件

    3.找到app-rounting-moudle.ts配置路由

      1)引入组件

     import { HomeComponent } from './home/home.component';
    import { NewsComponent } from './news/news.component';
    import { NewscontentComponent } from './newscontent/newscontent.component';

      2)配置路由

    const routes: Routes = [
      {path: 'home', component: HomeComponent},
      {path: 'news', component: NewsComponent},
      {path: 'newscontent/:id', component: NewscontentComponent},
      {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
    } ];

    4. 找到 app.component.html 根组件模板,配置 router-outlet 显示动态加载的路由

    <h1>
    <a routerLink="/home">首页</a> <a routerLink="/news">新闻</a>
    </h1>
    <router-outlet></router-outlet>
     <a routerLink="/home">首页</a> <a routerLink="/news">新闻</a>
    //匹配不到路由的时候加载的组件 或者跳转的路由 {
    path: '**', /*任意的路由*/ // component:HomeComponent redirectTo:'home'
    }

    Angular routerLinkActive 设 置 routerLink 默认选中路由

    <h1>
    <a routerLink="/home" routerLinkActive="active">首页</a> <a routerLink="/news" routerLinkActive="active">新闻</a>
    </h1>

    注意将样式放在全局样式中

    .active{
        color:red;
    }
  • 相关阅读:
    OO第一单元总结
    [软件工程]提问回顾与个人总结
    结对项目-最长单词链总结
    [软件工程]第一次阅读作业
    [软件工程] 第0次作业
    提问回顾与个人总结
    结对作业博客
    软工第1次个人作业
    软工第0次个人作业
    OO第四次总结
  • 原文地址:https://www.cnblogs.com/loaderman/p/10912118.html
Copyright © 2011-2022 走看看