角度（角度2または4）のルートを使用してページのタイトルを変更するにはどうすればよいですか？

Question

URLバーからリンクをクリックするかブラウズするたびに、ページのタイトルを変更したいと思います。どのように角度ルートを使用して変更するには？ 私は角度バージョン4と角度cliを使用しています。

Answer 1

あなたのコンポーネントでこの輸入を行う次に、あなたのルートにデータとして

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

の「タイトル」を渡すことがあります。

：

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

はインポート後、我々は彼らの両方を注入することができます

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

ページタイトルを静的に更新するには、単にsetTitleを次のように呼び出すことができます。

ngOnInit() { 
    this.titleService.setTitle('My awesome app'); 
}