webentwicklung-frage-antwort-db.com.de

Wie ändere ich den Titel einer Seite mithilfe der Winkelroute (Winkel 2 oder 4)?

Ich möchte den Titel der Seite jedes Mal ändern, wenn ich auf den Link in der URL-Leiste klicke oder diesen durchsuche. Wie ändere ich das mit Angular route? Ich verwende angular version 4 und angular cli.

angularangular-ui-routerangular-cli
20
Shakti

Sie können @angular/platefor-browser Verwenden, um setTitle(): zu verwenden

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

}
17
Shubham Verma

sie müssen "title" als Daten an Ihre Route übergeben

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 importieren Sie diese in Ihre 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 beide injizieren:

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

Um einen Seitentitel statisch zu aktualisieren, können wir setTitle einfach folgendermaßen aufrufen:

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);
        });
}
12
Houtan