Angular如何修改頁面的標題(Title)_進階

分享一個Angular的開發小技巧，說一下如何修改頁面的標題(Title)。

路由中加入參數來傳入Data

Angular2在路由设置里提供了data参数可以传值，如下︰

const routes: Routes = [
  {
    path: '',
    component: AppComponent,
    data: { title: 'NA'}
  },
  {
    path: 'home',
    component: AppComponent,
    data: { title: 'home'}
  },
  {
    path: 'index',
    component: AppComponent,
    data: { title: 'index'}
  } 
];

• path是地址栏的显示。

• component是调用的组件。

• data则可以传数据，在组件内可以调用。

[memo]  angular2里默认切换路由或者切换组件，页面的title是不会变化的。

 

調用Title服务可以修改頁面title

接者，我們先import 相關的核心服務(Title)

同時，可以用ActivatedRoute的snapshot的data属性，來获取當前路由内获取设置的参数

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser';
import { environment } from '../environments/environment';
​
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  routeconfig: any;
  title = 'angular-bh';
  appname: string;
​
  constructor(
    private router: Router,
    private activateroute: ActivatedRoute,
    private titleservice: Title
  ) { }
​
  ngOnInit(): void {
    this.appname = environment.appName;
    this.title = this.appname
    
    /* Get the config information from the app routing data
       and Set the page title */
    this.router.events.pipe(
     filter(event => event instanceof NavigationEnd)).pipe(
     map(() => this.activatedRoute)).pipe(
     map(route => {
      while (route.firstChild) route = route.firstChild;
      return route;
     })).pipe(
     filter(route => route.outlet === 'primary')).pipe(
     mergeMap(route => route.data))
     .subscribe((event) => {
         this.titleService.setTitle(this.appname + "--" + event['title']);
         console.log(this.appname + "--" + event['title'])
     });
     //.subscribe((event) => this.titleService.setTitle(this.appname + "--" + event['title']));
     
     console.log(this.router.config);
  }
  
}
​

 

Category

Angular

Keywords

Modern Web / Angular

 

License

使用 MIT 许可证发布。 详情请进入 LICENSE 查看。

 

Skyfu160