Angular’s Route
const routes: Routes = [
{
// 來源管理 一覽
path: 'sourceList',
component: SourceListComponent
},
{
// 推廣二維碼 一覽
path: 'qrcodeList',
component: QrcodeListComponent,
},
{
// 推廣二維碼 新建/編輯
path: 'qrcodeEdit',
component: QrcodeEditComponent,
},
{
// 推廣二維碼 詳情
path: 'qrcodeDetail',
component: QrcodeDetailComponent,
},
{
// 默認路由 -> 推廣二維碼 一覽
path: '',
redirectTo: 'qrcodeList',
pathMatch: 'full'
},
];
禁止瀏覽器history
https://angular.io/api/router/RouterLink
<a routerLink='/sharing' skipLocationChange="false">
https://angular.io/api/router/NavigationExtras
// Navigate silently to /view
this.router.navigate(['/view'], { skipLocationChange: true });
路由守護
TODO
路由傳值
html裏的路由跳轉
<!-- 如果沒有參數要傳的話,不需要加queryParams -->
<a nz-button nzType="default" routerLink="/qrcodeEdit" [queryParams]="{'id': item.id}">編輯</a>
組件裏的路由跳轉
// this.router是@angular/router模塊裏的Router
this.router.navigate(["/qrcodeEdit"], { id: qrcodeId });
路由參數獲取
使用Angular路由模塊中的ActivatedRoute
/**
* 在ngOnInit裏去獲取路由中的參數
*/
public ngOnInit() {
// ActivatedRoute是@angular/router模塊裏的
this.activeRoute.queryParams.subscribe(params => {
if (params.id && params.id !== "") {
this.id = params.id;
}
});
}
TODO:還有一種是snapshot的方式獲取,補充使用示例,以及兩種方式的區別
通過路由設置每個頁面標題
在app-routing.module.ts裏添加data: { title: 'xxx' }
// app-routing.module.ts
const routes: Routes = [
{
path: 'fissionList',
component: FissionListComponent,
data: { title: '模板活動' }
},
{
path: '',
redirectTo: '/fissionList',
pathMatch: 'full'
},
{
path: 'fissionEdit',
component: FissionEditComponent,
data: { title: '模板活動' }
},
{
path: 'fissionView',
component: FissionViewComponent,
data: { title: '模板活動詳情' }
}
];
列表頁:
// fission-list.ts
import { ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser';
constructor(
private activeRoute: ActivatedRoute,
private title: Title
) {}
public ngOnInit() {
this.title.setTitle(this.activeRoute.snapshot.data.title);
}
新建、編輯頁:
// fission-edit.ts
import { ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser';
constructor(
private activeRoute: ActivatedRoute,
private title: Title
) {}
public ngOnInit() {
this.activeRoute.queryParams.subscribe(params => {
if (params.id && params.id !== "") {
this.title.setTitle(`編輯${this.activeRoute.snapshot.data.title}`);
} else {
this.title.setTitle(`新建${this.activeRoute.snapshot.data.title}`);
}
});
}
angular router常用配置
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.