angular 之路由

1、用angular-cli建一个工程自带路由怎么做？

　　　　命令：ng new  项目名 --routing

2、怎么使用路由器和路由器的一些基本使用。

 

//html页面

 <a routerLink="/page1r" routerLinkActive="active">page1</a>
 <a routerLink="/page2" routerLinkActive="active">page2</a>
 <a routerLink="/admin" routerLinkActive="active">Admin</a>
<a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>   //'outlets'指定路由内容放置到那个router-outlet 容器内位置

    <router-outlet></router-outlet>
    <router-outlet name="popup"></router-outlet>

//ts页面

import { Routes, RouterModule } from '@angular/router'; 
const routes : Routes = [ {path: '',redirectTo:"/page1",pathMatch:"full"},//重定向 
{path: 'page1',component:Page1Component},//路径定向 
{path: 'page2',component:Page2Component}, 
{ path: 'compose', component: ComposeMessageComponent, outlet: 'popup' }, //路由到router-outlet属性名name 值为“popup”的路由容器上
 {path: '**',component:Page404Component},//注意 路由是从上到下找的，所以不要把万能匹配放到前面去，不然在其后面的路由将会失效，
//所以404路由永远是放在最后面的

 
];
 @NgModule(
{ imports: [ RouterModule.forRoot( appRoutes )//如果时分支路由这时要改成forChild(分支路由名)  ],
 exports: [ RouterModule ] }
)

3、路由传参

 如果你想路由传参可用2种方式 ：

　　路由参数（paramMap）和查询参数(queryParamMap)中的参数访问;

如： 路由是这样写的

　

//路由位置 http://localhost:4200/page1/fan/page3/lia?fang=1&liang=2#qwer

<a  [routerLink]="['/page1','fan','page3','lia']" routerLinkActive="active" [queryParams]="{'fang':1,'liang':2}" fragment="qwer">page1</a>

{path: 'page1/:id/page3/:id1',component:Page1Component}

//  ..ts

import {ActivatedRoute} from '@angular/router';//路由参数获取用‘ActivatedRoute’

constructor(
  private _activatedRoute:ActivatedRoute
) {

ngOnInit() {
  this._activatedRoute.queryParamMap
    .subscribe(rap=>{ //这时是获得查询参数{'fang':1,'liang':2}

      console.log(rap)
    });
  this._activatedRoute.paramMap
    .subscribe(rap=>{//这里是获得路由参数{'id':1,'id1':2}

      console.log(rap)
    })
}

 

总结：
　　看了很多路angular路由文，反过来再看angular官网路由，发现其实官网写的最好，只是太多了，一时收获不了，当看多了细碎的路由文后再头看官网其实多读几篇就基本都知道用了

　　　　官方：https://www.angular.cn/guide/router