Как изменить название страницы в angular2 router

Question

Я пытаюсь изменить название страницы с маршрутизатора, это можно сделать?

import {RouteConfig} from 'angular2/router'; 
@RouteConfig([ 
    {path: '/home', component: HomeCmp, name: 'HomeCmp' } 
]) 
class MyApp {} 

Answer 1

Title service @EricMartinez points out имеет метод setTitle() - это все, что вам нужно установить заголовок.

С точкой зрения делать это автоматически по изменению маршрутов, как сейчас нет никакого встроенного способа сделать это, кроме подписки на Router и вызова setTitle() в обратном вызове:

import {RouteConfig} from 'angular2/router'; 
import {Title} from 'angular2/platform/browser'; 

@RouteConfig([ 
    {path: '/home', component: HomeCmp, name: 'HomeCmp' } 
]) 
class MyApp { 
    constructor(router:Router, title:Title) { 
     router.events.subscribe((event)=>{ //fires on every URL change 
      title.setTitle(getTitleFor(router.url)); 
     }); 
    } 
} 

Это сказал, Я подчеркиваю на данный момент, потому что маршрутизатор все еще находится в тяжелом развитии, и я ожидаю (или, по крайней мере, надеюсь), что мы сможем это сделать через RouteConfig в финальной версии.

EDIT:

С выпуском Угловых 2 (2.0.0), несколько вещей, которые изменились:

• Документов для Title службы сейчас здесь: https://angular.io/docs/ts/latest/api/platform-browser/index/Title-class.html
• услуга импортируется из '@angular/platform-browser'

Answer 2

Вот мой подход, который отлично работает, особенно для вложенных маршрутов:

Я использую рекурсивный вспомогательный метод, чтобы захватить самый глубокий доступный титул после того, как маршрут изменился:

@Component({ 
    selector: 'app', 
    template: ` 
    <h1>{{title | async}}</h1> 
    <router-outlet></router-outlet> 
    ` 
}) 
export class AppComponent { 
    constructor(private router: Router) { 
    this.title = this.router.events 
     .filter((event) => event instanceof NavigationEnd) 
     .map(() => this.getDeepestTitle(this.router.routerState.snapshot.root)); 
    } 

    title: Observable<string>; 

    private getDeepestTitle(routeSnapshot: ActivatedRouteSnapshot) { 
    var title = routeSnapshot.data ? routeSnapshot.data['title'] : ''; 
    if (routeSnapshot.firstChild) { 
     title = this.getDeepestTitle(routeSnapshot.firstChild) || title; 
    } 
    return title; 
    } 
} 

Это при условии, что вы присвоили название страниц в свойстве данных маршрутов, например:

{ 
    path: 'example', 
    component: ExampleComponent, 
    data: { 
    title: 'Some Page' 
    } 
} 

Answer 3

Я также могу рекомендовать @ngx-meta/core плагин плагин, который я только что выпустили, в том случае, если вы ищете метод, чтобы установить заголовок страницы и мета-теги динамически.

Answer 4

Его действительно очень легко сделать это, вы можете следить за therse шагов, чтобы увидеть немедленные эффекты:

мы обеспечиваем обслуживание Названия в загрузчике:

import { NgModule } from '@angular/core'; 
import { BrowserModule, Title } from '@angular/platform-browser'; 

import { AppComponent } from './app.component'; 

@NgModule({ 
    imports: [ 
    BrowserModule 
    ], 
    declarations: [ 
    AppComponent 
    ], 
    providers: [ 
    Title 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

Затем импортировать эту услугу в компоненте, хочу:

import { Component } from '@angular/core'; 
import { Title }  from '@angular/platform-browser'; 

@Component({ 
selector: 'my-app', 
template: 
    `<p> 
    Select a title to set on the current HTML document: 
    </p> 

    <ul> 
    <li><a (click)="setTitle('Good morning!')">Good morning</a>.</li> 
    <li><a (click)="setTitle('Good afternoon!')">Good afternoon</a>.</li> 
    <li><a (click)="setTitle('Good evening!')">Good evening</a>.</li> 
    </ul> 
    ` 
}) 
export class AppComponent { 
    public constructor(private titleService: Title) { } 

    public setTitle(newTitle: string) { 
    this.titleService.setTitle(newTitle); 
    } 
} 

Теперь нажмите на эти ссылки, чтобы увидеть изменение названия.

вы также можете использовать NG2-мета для изменения заголовка страницы и описание, а также, вы можете обратиться к этой ссылке:

https://github.com/vinaygopinath/ng2-meta

Answer 5

import {Title} from "@angular/platform-browser"; 
@Component({ 
    selector: 'app', 
    templateUrl: './app.component.html', 
    providers : [Title] 
}) 

export class AppComponent implements { 
    constructor(private title: Title) { 
    this.title.setTitle('page title changed'); 
    } 
} 

Answer 6

Это то, что я пошел с:

constructor(private router: Router, private title: Title) { } 

ngOnInit() { 
    this.router.events.subscribe(event => { 
     if (event instanceof NavigationEnd) { 
      this.title.setTitle(this.recursivelyGenerateTitle(this.router.routerState.snapshot.root).join(' - ')); 
     } 
    }); 
} 

recursivelyGenerateTitle(snapshot: ActivatedRouteSnapshot) { 
    var titleParts = <string[]>[]; 
    if (snapshot) { 
     if (snapshot.firstChild) { 
      titleParts = titleParts.concat(this.recursivelyGenerateTitle(snapshot.firstChild)); 
     } 

     if (snapshot.data['title']) { 
      titleParts.push(snapshot.data['title']); 
     } 
    } 

    return titleParts; 
} 

Answer 7

Угловой 2 обеспечивает Title Service см. Ответ Shailesh - это просто копия этого кода.

I наш app.module.ts

import { BrowserModule, Title } from '@angular/platform-browser'; 
........ 
providers: [..., Title], 
bootstrap: [AppComponent] 

Теперь переходит к нашему app.component.ts

import { Title }  from '@angular/platform-browser'; 
...... 
export class AppComponent { 

    public constructor(private titleService: Title) { } 

    public setTitle(newTitle: string) { 
     this.titleService.setTitle(newTitle); 
    } 
} 

Поместите тег заголовка на вашем компонент HTML, и он будет читать и установить для вас ,

Если вы хотите знать, как установить его динамически и further detail see this article

Answer 8

Вот самый простой способ изменить заголовок страницы, когда страницы/взгляды навигация (Испытано от Угловая @ 2.3.1). Просто примените следующее решение для всех видов, которые вы имеете и вы должны быть хорошо идти:

Пример кода в О нас страница/зрения:

import {Title} from "@angular/platform-browser"; 

export class AboutUsComponent implements OnInit { 

    constructor(private _titleService: Title) { 
    } 

    ngOnInit() { 
    //Set page Title when this view is initialized 
    this._titleService.setTitle('About Us'); 
    } 

} 

Пример кода в странице Контакты/зрения :

import {Title} from "@angular/platform-browser"; 

export class ContactusComponent implements OnInit { 

    constructor(private _titleService: Title) { 
    } 

    ngOnInit() { 
    //Set page Title 
    this._titleService.setTitle('Contact Us'); 
    } 

} 

Answer 9

В приведенном ниже примере:

-Мы добавили объект из DAT a: {title: 'NAME'} к любому объекту маршрутизации.

-Мы установили базовое имя («CTM») для времени загрузки (при нажатии F5 для Refreash ..): <title>CTM</title>.

-Мы добавили класс TitleService.

-we обрабатывать события Routher, фильтруя их из app.component.ts.

index.html:

<!DOCTYPE html> 
<html> 
    <head> 
    <base href="/"> 
    <title>CTM</title> 
    </head> 

...

app.module.ts:

import { NgModule, enableProdMode } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { TitleService } from './shared/title.service'; 
... 


@NgModule({ 
    imports: [ 
    BrowserModule, 
.. 
    ], 
    declarations: [ 
     AppComponent, 
... 
    ], 
    providers: [ 
     TitleService, 
... 
    ], 
    bootstrap: [AppComponent], 
}) 
export class AppModule { } 

enableProdMode(); 

title.service.ts:

import { Injectable } from '@angular/core'; 
import { Title } from '@angular/platform-browser'; 
import { ActivatedRouteSnapshot } from '@angular/router'; 


@Injectable() 
export class TitleService extends Title { 

    constructor() { 
     super(); 
    } 


    private recursivelyGenerateTitle(snapshot: ActivatedRouteSnapshot) { 
     var titleParts = <string[]>[]; 
     if (snapshot) { 
      if (snapshot.firstChild) { 
       titleParts = this.recursivelyGenerateTitle(snapshot.firstChild); 
      } 

      if (snapshot.data['title']) { 
       titleParts.push(snapshot.data['title']); 
      } 
     } 

     return titleParts; 
    } 

    public CTMGenerateTitle(snapshot: ActivatedRouteSnapshot) { 
     this.setTitle("CTM | " + this.recursivelyGenerateTitle(snapshot).join(' - ')); 
    } 

} 

приложение-routing.module.TS:

import { Injectable } from '@angular/core'; 
import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { MainComponent } from './components/main.component'; 

import { Router, CanActivate } from '@angular/router'; 
import { AuthGuard }   from './shared/auth/auth-guard.service'; 
import { AuthService } from './shared/auth/auth.service'; 


export const routes: Routes = [ 
    { path: 'dashboard', component: MainComponent, canActivate: [AuthGuard], data: { title: 'Main' } }, 
]; 

@NgModule({ 
    imports: [ 
     RouterModule.forRoot(routes, { useHash: true }) // .../#/crisis-center/ 
    ], 
    exports: [RouterModule], 
    providers: [ 
.. 
    ] 
}) 

export class AppRoutingModule { } 

export const componentsOfAppRoutingModule = [MainComponent]; 

app.component.ts:

import { Component } from '@angular/core'; 
import { Router, NavigationEnd, ActivatedRouteSnapshot } from '@angular/router'; 
import { TitleService } from './shared/title.service'; 

@Component({ 
    selector: 'ctm-app', 
    template: ` 
    <!--<a [routerLink]="['/dashboard']">Dashboard</a> 
    <a [routerLink]="['/login']">Login</a> 
    <a [routerLink]="['/']">Rooting</a>--> 
    <router-outlet></router-outlet> 
    ` 
}) 
export class AppComponent { 

    constructor(private router: Router, private titleService: TitleService) { 

     this.router.events.filter((event) => event instanceof NavigationEnd).subscribe((event) => { 
      console.log("AppComponent.constructor: Setting HTML document's Title"); 
      this.titleService.CTMGenerateTitle(this.router.routerState.snapshot.root); 
     }); 

    } 


} 

Answer 10

угловых 4+:

Если вы хотите использовать маршрут пользовательские данные, чтобы определить заголовок страницы для каждого маршрута, следующий подход будет работать для вложенных маршрутов и с угловой версией 4+:

Вы можете передать заголовок страницы в вашем определении маршрута:

{path: 'home', component: DashboardComponent, data: {title: 'Home Pag'}}, 
    {path: 'about', component: AboutUsComponent, data: {title: 'About Us Page'}}, 
    {path: 'contact', component: ContactUsComponent, data: {title: 'Contact Us Pag'}}, 

Теперь самое главное в вашем верхнем компоненте уровня (т.е. AppComponent), вы можете глобально поймать маршрут пользовательских данных на каждом изменении маршрута и обновления название страницы:

import {Title} from "@angular/platform-browser"; 
export class AppComponent implements OnInit { 

    constructor(
     private activatedRoute: ActivatedRoute, 
     private router: Router, 
     private titleService: Title 
    ) { } 

    ngOnInit() { 
     this.router 
     .events 
     .filter(event => event instanceof NavigationEnd) 
     .map(() => { 
      let child = this.activatedRoute.firstChild; 
      while (child) { 
      if (child.firstChild) { 
       child = child.firstChild; 
      } else if (child.snapshot.data && child.snapshot.data['title']) { 
       return child.snapshot.data['title']; 
      } else { 
       return null; 
      } 
      } 
      return null; 
     }).subscribe((title: any) => { 
      this.titleService.setTitle(title); 
     }); 
    } 
} 

Вышеупомянутый код проверен на угловой уровень 4+.