Angular 2 yeni yönlendiriciyi kullanarak sayfa başlığını değiştirme

Question

yeni yönlendirici'u kullanırken tarayıcıda uygulama sayfası başlığını değiştirmenin doğru yolu nedir? Kullanılması

* Açısal 2 CLI

Sen düz bileşenin kurucusundan title service ile başlık ayarlayabilirsiniz

Answer 1

data özelliğinin kullanılması kullanılabilir.

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; 
    } 
} 

Plunker example

sadece benzer bir yaklaşım gösterilmektedir https://github.com/angular/angular/issues/9662#issuecomment-229034288 bulundu.

Ayrıca daha güzel bir kod ile https://toddmotto.com/dynamic-page-titles-angular-2-router-events da buldum. (Alınan: https://toddmotto.com/dynamic-page-titles-angular-2-router-events) kodu takiben

Answer 2

: Başlık akımından başlığını almak için Title service

kullanılarak ayarlanabilir

Answer 3

bir cazibe gibi çalışır: o zaman

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' } } 
    ] 
}]; 

ve sonraki çağrılarda 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'])); 
    } 
} 

bir bileşen olarak adlandırılır ilk kez çalışacak