文章目录
1.使用angular CLI生成AppRoutingModule
ng generate module app-routing --flat --module=app
–flat将文件放在src / app而不是新建的文件夹中。
–module = app告诉CLI将其注册到AppModule的imports数组中。
生成的文件如下图所示:
import {
NgModule } from '@angular/core';
import {
CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
],
declarations: []
})
export class AppRoutingModule {
}
通常不在路由模块中声明组件,因此可以删除@ NgModule.declarations数组,并删除CommonModule引用。
2.导入RouterModule和Router
我们将在RouterModule中配置路由器的路由,因此从@ angular /路由器库中导入RouterModule和Router。
在@ NgModule中添加一个带有RouterModule的@ NgModule.exports数组。 导出RouterModule使路由器指令用于需要它们的AppModule组件。
代码如下:
import {
NgModule } from '@angular/core';
import {
Routes, RouterModule } from '@angular/router';
@NgModule({
imports: [],
exports: [RouterModule]
})
export class AppRoutingModule {
}
Angular Route有两个属性:
path:与浏览器地址栏中的URL匹配的字符串。
component:导航到此路由时路由器应创建的组件。
例如:
当URL类似于localhost:4200 / hero时,页面就会导航到HeroComponent。
3.在@ NgModule.imports中配置路由
import {
NgModu