angular6 路由使用

1.建立一個路由文件

D:\cmf\angular6\project1>ng g module routing --module=app

CREATE src/app/routing/routing.module.spec.ts (283 bytes)
CREATE src/app/routing/routing.module.ts (191 bytes)
UPDATE src/app/app.module.ts (955 bytes)

路由文件注意事項

①導入import RouterModule , Routes ,

②@NgModule模塊下

imports： 導入 RouterModule.forRoot(routes) routes為路由規則

exports： 導入 RouterModule

③導入要鏈接的組件  AddsiteComponent

④定義路由規則

routes: Routes = [

{ path: 'addsite', component: AddsiteComponent }

]

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

import { AddsiteComponent } from '../addsite/addsite.component';

const routes: Routes = [
    {path: 'addsite', component: AddsiteComponent},
]

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

　　

 

 

 

 2.根模塊注冊 app.module.ts

①import 

組件：import { AddsiteComponent } from './addsite/addsite.component';

路由：import { RoutingModule } from './routing/routing.module';

 ②@NgModule

declarations：AddsiteComponent 

imports        ：RoutingModule

 

3.組件內路由使用 app.component.html

①元素屬性使用routerLink='/addsite' 不一定非要是a標簽 這里使用的button

②結束使用<router-outlet></router-outlet>

 

<div class="colr-lg-3">
<button class="btn btn-primary" routerLink="/addsite">
添加
</button>
</div>
<router-outlet></router-outlet>

 

 

 

參考資料：

https://angular.cn/tutorial/toh-pt5