angular6-Routing

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 { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HeroComponent }   from './hero/hero.component';

const routes: Routes = [
  { path: 'hero', component: HeroComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

4.添加RouterOutlet

在app.component.html中添加

<router-outlet></router-outlet>

<router-outlet>是告诉路由器在哪里显示路由视图

5.添加导航链接routerLink

app.component.html

<nav>
  <a routerLink="/hero">Hero</a>
</nav>

<router-outlet></router-outlet>

ng serve

页面会出现一个Hero链接，点击则会在Hero下面显示hero组建的信息