发表于: 2021-10-23 23:03:30
0 1248
完善左侧导航栏
查看路由文档
入这些新组件
要使用这些新组件,请把它们导入到该文件顶部的 AppRoutingModule
中,具体如下:
import { FirstComponent } from './first/first.component';import { SecondComponent } from './second/second.component';
定义一个基本路由
创建路由有三个基本的构建块。
把 AppRoutingModule
导入 AppModule
并把它添加到 imports
数组中。
Angular CLI 会为你执行这一步骤。但是,如果要手动创建应用或使用现存的非 CLI 应用,请验证导入和配置是否正确。下面是使用 --routing
标志生成的默认 AppModule
。
import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module'; // CLI imports AppRoutingModuleimport { AppComponent } from './app.component';@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule // CLI adds AppRoutingModule to the AppModule's imports array
],
providers: [],
bootstrap: [AppComponent]})export class AppModule { }
把
RouterModule
和Routes
导入到你的路由模块中。Angular CLI 会自动执行这一步骤。CLI 还为你的路由设置了
Routes
数组,并为@NgModule()
配置了imports
和exports
数组。CLI application routing module import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router'; // CLI imports routerconst routes: Routes = []; // sets up routes constant where you define your routes// configures NgModule imports and exports@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule]})export class AppRoutingModule { }
在
Routes
数组中定义你的路由。这个数组中的每个路由都是一个包含两个属性的 JavaScript 对象。第一个属性
path
定义了该路由的 URL 路径。第二个属性component
定义了要让 Angular 用作相应路径的组件。
const routes: Routes = [
{ path: 'first-component', component: FirstComponent },
{ path: 'second-component', component: SecondComponent },];
把这些路由添加到你的应用中。
现在你已经定义了路由,可以把它们添加到应用中了。首先,添加到这两个组件的链接。把要添加路由的链接赋值给
routerLink
属性。将属性的值设置为该组件,以便在用户点击各个链接时显示这个值。接下来,修改组件模板以包含<router-outlet>
标签。该元素会通知 Angular,你可以用所选路由的组件更新应用的视图。Template with routerLink and router-outlet <h1>Angular Router App</h1><!-- This nav gives you links to click, which tells the router which route to use (defined in the routes constant in AppRoutingModule) --><nav> <ul> <li><a routerLink="/first-component" routerLinkActive="active">First Component</a></li> <li><a routerLink="/second-component" routerLinkActive="active">Second Component</a></li> </ul></nav><!-- The routed views render in the <router-outlet>--><router-outlet></router-outlet>
路由顺序
路由的顺序很重要,因为 Router
在匹配路由时使用“先到先得”策略,所以应该在不那么具体的路由前面放置更具体的路由。首先列出静态路径的路由,然后是一个与默认路由匹配的空路径路由。通配符路由是最后一个,因为它匹配每一个 URL,只有当其它路由都没有匹配时,Router
才会选择它。
评论