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