回答
標題可以使用Title
service
要想從目前的標題設置可以使用data
路由屬性。
const routes: RouterConfig = [
{
path: '',
redirectTo: '/login',
pathMatch: 'full',
},
{
path: 'login',
component: LoginComponent,
data: {title: 'Login'}
},
{
path: 'home',
component: HomeComponent,
data: {title: 'Home'}
},
{
path: 'wepays',
component: WePaysComponent,
data: {title: 'WePays'}
}
];
export class AppComponent {
constructor(titleService:Title, router:Router, activatedRoute:ActivatedRoute) {
router.events.subscribe(event => {
if(event instanceof NavigationEnd) {
var title = this.getTitle(router.routerState, router.routerState.root).join('-');
console.log('title', title);
titleService.setTitle(title);
}
});
}
// collect that title data properties from all child routes
// there might be a better way but this worked for me
getTitle(state, parent) {
var data = [];
if(parent && parent.snapshot.data && parent.snapshot.data.title) {
data.push(parent.snapshot.data.title);
}
if(state && parent) {
data.push(... this.getTitle(state, state.firstChild(parent)));
}
return data;
}
}
剛剛發現https://github.com/angular/angular/issues/9662#issuecomment-229034288其中表現出了類似的方法。
我還發現https://toddmotto.com/dynamic-page-titles-angular-2-router-events有點漂亮的代碼。
下面的代碼(摘自:https://toddmotto.com/dynamic-page-titles-angular-2-router-events)的作品就像一個魅力:
const routes: Routes = [{
path: 'calendar',
component: CalendarComponent,
children: [
{ path: '', redirectTo: 'new', pathMatch: 'full' },
{ path: 'all', component: CalendarListComponent, data: { title: 'My Calendar' } },
{ path: 'new', component: CalendarEventComponent, data: { title: 'New Calendar Entry' } },
{ path: ':id', component: CalendarEventComponent, data: { title: 'Calendar Entry' } }
]
}];
然後AppComponent
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser';
@Component({...})
export class AppComponent implements OnInit {
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
private titleService: Title
) {}
ngOnInit() {
this.router.events
.filter(event => event instanceof NavigationEnd)
.map(() => this.activatedRoute)
.map(route => {
while (route.firstChild) route = route.firstChild;
return route;
})
.filter(route => route.outlet === 'primary')
.mergeMap(route => route.data)
.subscribe((event) => this.titleService.setTitle(event['title']));
}
}
這是一個非常長的代碼行來獲取數據:路徑 –
的{title}不適用於嵌套/鏈接標題(ParentRoute title [separator] ChildRoute title)。 接受的答案是完整的解決方案。 – MrCroft
它是否適用於加載'{path:':shipmentId',canActivate:[SessionGuardService],loadChildren:'app/edit-shipment/edit-shipment.module#EditShipmentModule',data:{title:PageTitle.editShipmentPage}}' ,注意到當定義的路由來自延遲加載時標題不會被設置 –
- 1. 使用Angular 2路由器服務更改頁面標題
- 2. Angular 2路由器刷新頁面,同時路由
- 3. Angular 2:更新路由器url獲取更改時的iframe src
- 4. 使用angularjs路由更改頁面的標題
- 5. 刷新頁面角2路由器
- 6. 訂閱新的Angular 2路由器的更改(> = rc1)
- 7. 在路由器事件中顯示Angular 2的翻譯動態頁面標題
- 8. 頁標題,描述使用angular-ui路由器
- 9. 如何更改Angular 2目錄路由?
- 10. Angular 2路由問題
- 11. Angular 2路由問題
- 12. Angular 2路由問題,路由到空白頁
- 13. Angular 2路由 - 路由器RC3
- 14. Angular 2使用管道路由到頁面
- 15. 如何使用$ routeProvider更改Angular中的頁面標題
- 16. 角2路由器標題與參數
- 17. Angular 2路由器錯誤
- 18. UI路由器刷新頁面而不是狀態更改
- 19. Angular 2渲染頁面沒有路由器插座
- 20. Angular Ui路由器 - 無法更改$ state.current.data
- 21. Angular UI路由器,標題動態
- 22. Angular 2單擊事件:更改圖像,然後更改路由
- 23. 在Angular中路由到非Angular頁面
- 24. Angular 2根據當前路由器狀態更改sidenav內容
- 25. 如何強制路由器更新Angular 2中的當前路由?
- 26. 如何獲取Angular UI路由器在頁面加載路由
- 27. 使用Angular 2.0路由器進行頁面過渡動畫
- 28. 更新角度後路由器不會路由到組件2
- 29. Angular 2路由,.htaccess
- 30. Angular 2路由onActivate
什麼是第一次加載? –
有什麼問題? –
router.events.subscribe ...對路由器的改變非常有用,但是它並沒有在第一次加載頁面時被觸發,所以沒有標題 –