Dynamic title trong Angular

Trong nhiều huống ta cần thay dổi nội dung title của trang web cho phù hợp với nội dung của trang web và Angular 2 đã hỗ sợ sẵn một service cho phép thay đổi title của trang.
Để set title thì ta sẽ sử dụng Title service trong @angular/platform-browser bằng cách Inject vào AppComponent thông qua constructor

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

export class AppComponent {
    // code...
    constructor(private title: Title){}
    // code...
}

Trong AppComponent ta lắng nghe sự kiện thay đổi URL khi điều hướng.

routeLinkChange(){
    this.router.events.filter((event) => event instanceof NavigationEnd)
        .subscribe((evt: NavigationEnd) => {
            const title = this.getDeepestRoutingData(this.route.snapshot).title;
            this.title.setTitle(title ? title : 'Default title');
        }
    );
}

Trong đó hàm getDeepestRoutingData() sẽ lấy data được đặt trong một routing nào đó như app-routing.module.ts



getDeepestRoutingData(routeSnapshot: ActivatedRouteSnapshot) {
    let data = routeSnapshot.data ? routeSnapshot.data : null;
    if (routeSnapshot.firstChild) {
      data = this.getDeepestRoutingData(routeSnapshot.firstChild) || data;
    }

    return data;
}

Để đặt title cho đường dẫn trang tương ứng ta thêm data và mỗi một route. Nếu không truyền thì thì title sẽ được đặt là Default title ở trên.

// app-routing.module.ts
const routes: Routes = [
    { path: "", component: HomeComponent, pathMatch: "full"},
    { path: "about", component: AboutComponent, data: {title: 'About'}},
]

Tham khảo: https://stackoverflow.com/questions/34602806/how-to-change-page-title-in-angular2-router