Angular学习笔记之-10.路由

路由

定义你的各个路由

1.任务:
1.路由 /crisis-center 用来打开 crisis-center 组件。
2.路由 /heroes-list 用来打开 heroes-list 组件。

2.相关代码

  /* src/app/app.module.ts */
        imports: [
        BrowserModule,
        RouterModule.forRoot([
            {path: 'crisis-list', component: CrisisListComponent},
            {path: 'heroes-list', component: HeroesListComponent},
        ]),
        ],

更新你的组件以添加 router-outlet

1.任务:
1.需要更新模板，以便根据 URL 路径动态加载一个组件。

2.相关代码

    /* src/app/app.component.html */
       <router-outlet></router-outlet>

用 UI 元素控制导航

1.任务:
1.添加按钮进行导航。

2.相关代码

  /* src/app/app.component.html */
      <nav>
        <a class="button" routerLink="/crisis-list">Crisis Center</a> |
        <a class="button" routerLink="/heroes-list">Heroes</a>
      </nav>

       <router-outlet></router-outlet>

标出活动路由

1.任务:
1.添加导航按钮为激活时候的css样式。

2.相关代码

   /* src/app/app.component.html */
      <nav>
        <a class="button" routerLink="/crisis-list" routerLinkActive="activebutton">Crisis Center</a> |
        <a class="button" routerLink="/heroes-list" routerLinkActive="activebutton">Heroes</a>
      </nav>
       <router-outlet></router-outlet>

  /* src/app/app.component.css */
      .button {
            box-shadow: inset 0px 1px 0px 0px #ffffff;
            background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
            background-color: #ffffff;
            border-radius: 6px;
            border: 1px solid #dcdcdc;
            display: inline-block;
            cursor: pointer;
            color: #666666;
            font-family: Arial;
            font-size: 15px;
            font-weight: bold;
            padding: 6px 24px;
            text-decoration: none;
            text-shadow: 0px 1px 0px #ffffff;
            outline: 0;
        }
        .activebutton {
            box-shadow: inset 0px 1px 0px 0px #dcecfb;
            background: linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
            background-color: #bddbfa;
            border-radius: 6px;
            border: 1px solid #84bbf3;
            display: inline-block;
            cursor: pointer;
            color: #ffffff;
            font-family: Arial;
            font-size: 15px;
            font-weight: bold;
            padding: 6px 24px;
            text-decoration: none;
            text-shadow: 0px 1px 0px #528ecc;
            outline: 0;
        }

添加一个重定向

1.相关代码

   /* src/app/app.module.ts */
     imports: [
        BrowserModule,
        RouterModule.forRoot([
            {path: 'crisis-list', component: CrisisListComponent},
            {path: 'heroes-list', component: HeroesListComponent},
            {path: '', redirectTo: '/heroes-list', pathMatch: 'full'},
        ]),
    ],

添加 404 页面

1.相关代码

    /* src/app/app.module.ts */
     imports: [
        BrowserModule,
        RouterModule.forRoot([
            {path: 'crisis-list', component: CrisisListComponent},
            {path: 'heroes-list', component: HeroesListComponent},
            {path: '', redirectTo: '/heroes-list', pathMatch: 'full'},
            {path: '**', component: PageNotFoundComponent}
        ]),
    ],

路由器教程：英雄之旅

官网之路由器教程：英雄之旅

里程碑 1:起步

重点:
    1.当用户单击某个链接时，该示例应用可以在两个视图之间切换。

里程碑 2：路由模块

重点:
    1.将路由配置重构为路由模块

里程碑 3: 特征区

重点:
    1.模块导入顺序
        请注意该模块的 imports 数组，AppRoutingModule 是最后一个,路由配置的顺序很重要，因为路由器会接受第一个匹配上导航所要求的路径的那个路由。当所有路由都在同一个 AppRoutingModule 时，你要把默认路由和通配符路由放在最后（这里是在 /heroes 路由后面）， 这样路由器才有机会匹配到 /heroes 路由，否则它就会先遇到并匹配上该通配符路由，并导航到“页面未找到”路由。
    2.路由参数
        带参数的路由定义
        { path: 'hero/:id', component: HeroDetailComponent } //localhost:4200/hero/15
        在列表视图中设置路由参数
        <a [routerLink]="['/hero', hero.id]">
    3.ActivatedRoute 实战

里程碑 4: 危机中心

重点:
    1.带有子路由的危机中心

 const crisisCenterRoutes: Routes = [
            {
                path: 'crisis-center',
                component: CrisisCenterComponent,
                children: [
                {
                    path: '',
                    component: CrisisListComponent,
                    children: [
                    {
                        path: ':id',
                        component: CrisisDetailComponent
                    },
                    {
                        path: '',
                        component: CrisisCenterHomeComponent
                    }
                    ]
                }
                ]
            }
            ];

    2.用命名出口（outlet）显示多重路由

<!-- src/app/app.component.html -->
 <div [@routeAnimation]="getAnimationData(routerOutlet)">
      <router-outlet #routerOutlet="outlet"></router-outlet>
  </div>
  <router-outlet name="popup"></router-outlet>

    添加第二路由

   // src/app/app-routing.module.ts (compose route)

     {
          path: 'compose',
          component: ComposeMessageComponent,
          outlet: 'popup'
      },

  <!-- src/app/app.component.html  -->

   <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>

    第二路由很像主路由，配置方式也一样。它们只有一些关键的不同点：

    它们彼此互不依赖。

    它们与其它路由组合使用。

    它们显示在命名出口中。

里程碑 5：路由守卫

  重点:
    1.CanActivate ：需要身份验证
    2.CanActivateChild：保护子路由
    3.CanDeactivate：处理未保存的更改
    4.Resolve: 预先获取组件数据

里程碑 6：异步路由

  重点:
    1.惰性加载路由配置
    2.CanLoad：保护对特性模块的未授权加载
    3.自定义预加载策略
    4.使用重定向迁移 URL