角度2は、ルータイベントとタイトルを使用して動的ページタイトルを実装します

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

Angular2はタイトルと呼ばれるサービスを提供し、ページタイトルを変更して取得しますが、各ページのngOnInitメソッドで各ページのタイトルを設定できるのであれば、それは低すぎず、Angular2の高さ(zhuang) (bi)数字。 その結果、ページが変更されたときにページタイトルを動的に変更できるようにするため、ルータイベントとタイトルサービスを組み合わせて使用​​することをお勧めします。

タイトルサービス

当然、サービスの使用を最初に導入する必要がありますが、タイトルサービスは@ angular / coreではなく、@ angular / platform-b​​rowserにあります。


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

導入後は、現在のコンポーネントに注入するのが自然です。これは通常、コンストラクタで行います。


import { Title } from '@angular/platform-browser';
import {Component} from '@angular/core';
@Component({})
export class AppComponent {
constructor(private titleService: Title) {
// 使用this.title到处浪
}
}

明らかに、タイトルサービスは、ドキュメントを参照するかソースコードを参照するかによって、ページのタイトルを操作する何らかの方法を持つ必要があります。

getTitle()は、現在の現在のページのタイトルを取得するために使用されます。
setTitle(newTitle:String)は、現在のページのタイトルを設定するために使用されます

静的にページタイトルを設定するだけの場合は、ngOnInitメソッドでsetTitleメソッドを直接使用できます。


// import bala...
@Component({})
export class AppComponent implements OnInit {
constructor(private titleService: Title) {
// 使用this.title到处浪
}
ngOnInit() {
this.titleService.setTitle('New Title Here');
}
}

ngOnInitのsetTitleメソッドを使用してドキュメントのタイトルを設定するとよいでしょう。もちろん、必要に応じてsetTitleメソッドを使用することもできます。

ルータイベントとルータイベント

ルータとタイトルサービスを使用するプロセスは、基本的には同じで、最初に導入して注入しますが、ルータとタイトルサービスは同様に@ angular / coreにありますが、@ angular / routerにあります。


import { Title } from '@angular/platform-browser';
import {Component} from '@angular/core';
import {Router} from '@angular/router';
@Component({})
export class AppComponent {
constructor(private titleService: Title, private router: Router) {
// 使用this.title和this.router到处浪
}
}

ルータの設定

Angular2では、ページ間のジャンプは、URL、ルータ、コンポーネント間の対応によって実行されます。ルータは、ブラウザのURLを操作ガイドとみなし、クライアントが生成したビューにナビゲートすることができます。パラメータはサポートビューの対応するコンポーネントに渡されます。 したがって、ルーティングテーブルを定義する必要があります。


// import bala...
export const rootRouterConfig: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full'},
{ path: 'home', component: HomeComponent, data: {title: 'Home-Liu'} },
{ path: 'about', component: AboutComponent, data: {title: 'About-Liu'} },
{ path: 'github', component: RepoBrowserComponent,
children: [
{ path: '', component: RepoListComponent, data: {title: 'GitHub List'} },
{ path: ':org', component: RepoListComponent,
children: [
{ path: '', component: RepoDetailComponent, data: {title: 'Repo'} },
{ path: ':repo', component: RepoDetailComponent, data: {title: 'RepoDetail'} }
]
}]
},
{ path: 'contact', component: ContactComponent, data: {title: 'Contact-Liu'} }
];

パスとコンポーネントの対応に注意し、Routerイベントでページタイトルを取得するために、ルーティングテーブルのいくつかのページのデータデータを提供し、データのページタイトルを示すtitle属性を設定します。

ルータイベント

AppComponentはルートコンポーネントであるため、すべてのRouterイベントにサブスクライブすることができます:


ngOnInit() {
this.router.events
.subscribe((event) => {
console.log(event);  // 包括NavigationStart, RoutesRecognized, NavigationEnd
});
}

もちろん、ここではNavigationEndイベントに興味があります:


import {ActivatedRoute} from '@angular/router';
// import bala...
// other codes
ngOnInit() {
this.router.events
.subscribe((event) => {
if (event instanceof NavigationEnd) {
console.log('NavigationEnd:', event);
}
});
}

もちろん、この種の判定スクリーニングの使用には何も問題はありませんが、現在のフロントエンドの世界では十分にエレガントではありません.RxJSのフィルタを使用して目標を達成する必要があります。


import 'rxjs/add/operator/filter';
// import bala...
// other codes
ngOnInit() {
this.router.events
.filter(event => event instanceof NavigationEnd) // 筛选原始的Observable:this.router.events
.subscribe((event) => {
console.log('NavigationEnd:', event);
});
}

もちろん、ページのタイトルを動的に変更したい場合は、現在表示されているページに対応するルーティング情報を取得する必要があります。この情報は、タイトルサービスとルータに似ているActivateRouteで取得でき、


import { Title } from '@angular/platform-browser';
import {Component, OnInit} from '@angular/core';
import {Router, NavigationEnd, ActivatedRoute} from '@angular/router';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
@Component({})
export class AppComponent implements OnInit {
constructor(private titleService: Title, private router: Router, private activatedRoute: ActivatedRoute) {
// 使用this.title和this.router和this.activatedRoute到处浪
}
ngOnInit() {
this.router.events
.filter(event => event instanceof NavigationEnd)
.map(() => this.activatedRoute) // 将filter处理后的Observable再次处理
.subscribe((event) => {
console.log('NavigationEnd:', event);
});
}
}

ここではRxJSのマップを使用して、よりエレガントに目標を達成することに注意してください。

上記のルーティング設定の子属性であるサブルートをまだ処理していないので、それぞれを取得するためにルーティングテーブルをトラバースする必要もあります1ページに対応するルーティング情報:


ngOnInit() {
this.router.events
.filter(event => event instanceof NavigationEnd)
.map(() => this.activatedRoute)
.map((route) => {
while(route.firstChild) {
route = router.firstChild;
}
return route;
})
.subscribe((event) => {
console.log('NavigationEnd:', event);
});
}

最後に、ルーティングテーブルの各ルートで渡したデータを取得し、タイトルサービスを使用してページタイトルを設定する必要があります。


ngOnInit() {
this.router.events
.filter(event => event instanceof NavigationEnd)
.map(() => this.activatedRoute)
.map(route => {
while (route.firstChild) route = route.firstChild;
return route;
})
.mergeMap(route => route.data)
.subscribe((event) => this.titleService.setTitle(event['title']));
}

ここで最後のコードを完成させるか、GitHubを使って完全なコードを見ることができます :


import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
@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']));
}
}

参考資料

Angular2ルーティングガイド

Angualr2 ActivatedRouteのドキュメント


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ