So ändern Sie den Titel einer Seite mit Winkel(Winkel 2 oder 4) route?

Möchte ich ändern Sie den Titel der Seite immer, wenn ich Sie oder durchsuchen Sie den link aus der URL-Leiste. So ändern, dass die Verwendung von Angular-route?
Ich bin mit eckigen version 4 und Winkel-cli.

So zu ändern, dass die Verwendung von Angular-route? unter dem Stichwort "change page title angular2".
Mögliche Duplikate von how to change page title in angular2 router
Danke, aber das war der code nicht funktioniert, oder ich war nicht in der Lage zu realisieren, dass in meinem code.
Dann präsentieren, was Sie getan haben, und in welchen besonderen Weg, es hat nicht funktioniert, und/oder in welcher besonderen Weise Sie waren nicht in der Lage, Sie zu implementieren, in Ihrem code.

InformationsquelleAutor Shakti | 2017-05-16

  1. 13

    müssen Sie "Titel" als die Daten zu Ihrer route

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

    Dann machen Sie diese Importe in der Komponente:

    import { Title } from '@angular/platform-browser';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';

    Einmal importiert, können wir injizieren Sie beide:

    @Component({
  selector: 'app-root',
  templateUrl: `
    <div>
      Hello world!
    </div>
  `
})
export class AppComponent {
  constructor( private router: Router,
               private activatedRoute: ActivatedRoute,
               private titleService: Title) {}
}

    Aktualisieren einer Seite-Titel statisch, wir können einfach rufen Sie setTitle etwa so:

    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) => {
            let title = 'Default Title Here'
            if(event['title']) {
                title = event['title'];
            }
            this.titleService.setTitle(title);
        });
}
    Danke für die Antwort. Aber ich möchte wissen, ist dies der vollständige code für das ändern des Titels? Implementiert habe ich dies aber noch war ich nicht in der Lage, den Titel zu ändern. Wie ich bin ein Anfänger in der eckigen, können Sie senden Sie mir den vollständigen code?
    ok, sicher, ich werde es schreiben sehr bald
    im folgenden wird der vollständige code: toddmotto.com/dynamic-page-titles-angular-2-router-events
    -1: data: { title: '...'} ist in diesem Beispiel nicht verwendet und so ist es beantwortet die Frage nicht direkt. Scheint wie eine schnelle copy paste aus dem link, den @jking vor zur Verfügung gestellt
    -1 auch. Zumindest geben Kredit, in dem Sie die Kopie eingefügt diese Antwort. toddmotto.com/dynamic-page-titles-angular-2-router-events

    InformationsquelleAutor Houtan

  2. 12

    Können Sie verwenden @angular/platefor-browser zu verwenden, die setTitle():

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

@Component({
  selector: 'your-component',
})

export class YourComponent implements onInit {
  constructor(private title: Title) {}

 ngOnInit() {
     this.title.setTitle('Title for this component');
 }

}
    Arbeit, So EZ Dank !
    Könnte es nicht zu dieser Frage, gibt es eine Möglichkeit, es zu ändern zurück, nachdem die Umleitung auf andere Seiten, die andere als setTitle in allen anderen Seiten? Da diese änderung wird gehalten nach dem verlassen dieser Seite.

    InformationsquelleAutor Shubham Verma

Schreibe einen Kommentar