Angular-路由和导航1

要点

1. index.html中的base标签定义路由的起始点

<base href="/">

2. 路由模块中的routs数组定义各组件对应的路径

const routes: Routes = [
  {path:'departments', component:DepartmentListComponent},
  {path:'employees', component:EmployeeListComponent}
];

3. 在应用模块定义一个包含所有组件的数组，一次性导进应用模块，代码会简洁很多

//路由模块
export const routingComponents=[DepartmentListComponent,EmployeeListComponent]
//应用模块
import { AppRoutingModule, routingComponents } from './app-routing.module';
@NgModule({
  declarations: [
    AppComponent,
    routingComponents
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

4. 链接组件：routerLink属性，设置超链接/按钮单击后样式：routerLinkActive属性

<nav style="text-align:center">
  <a routerLink="/departments" routerLinkActive="active">Departments</a>&nbsp;&nbsp;
  <a routerLink="/employees" routerLinkActive="active">Employees</a>
</nav>

5. router-outlet定义组件显示的位置