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

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

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

Ответ 1

Title service @EricMartinez указывает, имеет метод 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:

Начиная с выпуска Angular 2 (2.0.0), несколько вещей изменились:

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

Ответ 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'
  }
}

Ответ 3

Его очень легко сделать, вы можете выполнить следующие шаги, чтобы увидеть непосредственные эффекты:

мы предоставляем службу Title в бутстрапе:

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-meta для изменения названия и описания страницы, вы можете обратиться к этой ссылке:

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

Ответ 4

Angular 2 предоставляет Служба заголовков, см. ответ Shailesh - это просто копия этого кода.

Я наш 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 );
    }
}

Поместите тег title на свой компонентный html, и он будет читать и устанавливать для вас.

Если вы хотите узнать, как установить его динамически и подробнее см. эту статью

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

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

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

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

- мы обрабатываем события 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 Title");
            this.titleService.CTMGenerateTitle(this.router.routerState.snapshot.root);
        });

    }


}

Ответ 8

Для Angular 4 +:

Если вы хотите использовать пользовательские данные маршрута для определения названия страницы для каждого маршрута маршрута, для вложенных маршрутов будет работать следующий подход и Angular версия 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);
       });
    }
 }

Вышеприведенный код проверяется на Angular verion 4 +.

Ответ 9

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

Ответ 10

Здесь простейший способ изменить название страницы, когда просматриваются страницы/представления (протестировано с Angular @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');
  }

}