Angular8 动态设定页面标题title

最新推荐文章于 2023-10-28 18:41:24 发布

魔幻星辰

最新推荐文章于 2023-10-28 18:41:24 发布

阅读量1.8k

点赞数 1

分类专栏： angular 文章标签： angular8 设置title 封装service

本文链接：https://blog.csdn.net/weixin_39720860/article/details/103959161

版权

angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一般情况下在页面修改标题需要在每个页面组件里引入:

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


constructor(
    private titleService: Title
) { }

this.titleService.setTitle("title");

但是，在每个页面都写一次是不是很繁琐呢，也不利于管理标题。可以将设定标题封装成一个services服务,达到统一修改title的目的。

1. 修改页面入口文件index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>{{title}}</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

2. 配置页面的路由，设置data属性中的title

const routes: Routes = [
  { path: '',   redirectTo: '/login', pathMatch: 'full' },
  { path: 'login', component : LoginComponent , data : { title : "登录" }},
  { path: 'index', loadChildren: () => import('./pages/index/index.module').then(m => m.IndexModule), data : { title : "首页" } },
  { path: '**', component: NotFoundComponent , data : { title : "404" }}
];

3.创建一个公共服务CommonService

import { Injectable } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser';
import { map, filter } from "rxjs/operators";

@Injectable({
  providedIn: 'root'
})
export class CommonService {

  constructor(
    private router: Router,
    private titleService: Title
) {}

  public setTitle() {
    this.router.events.pipe(
        filter(event => event instanceof NavigationEnd),
        map(() => this.router)
      )
      .subscribe((event) => {
        const titles = this.getTitle(this.router.routerState, this.router.routerState.root);
        const title = titles[titles.length - 1];
        // console.log(title);
        if (title) {
          this.titleService.setTitle(title);
        }
      });
  }

  public getTitle(state, parent) {
    const data = [];
    if (parent && parent.snapshot.data && parent.snapshot.data.title) {
      data.push(parent.snapshot.data.title);
    }
    if (state && parent) {
      data.push(...this.getTitle(state, state.firstChild(parent)));
    }
    return data;
  }
}

4.在根模块`app.component.ts`中调用

引用注入公共服务CommonService,并调用setTitle设置title

import { Component } from '@angular/core';

import { CommonService } from "@services/common.service";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {

  constructor(
    private common: CommonService
  ) { }

  ngOnInit() {
    //设置页面标题
    this.common.setTitle();
  }
}

5.运行结果

魔幻星辰

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
Angular8 动态设定页面标题title

一般情况下在页面修改标题需要在每个页面组件里引入:import { Title } from '@angular/platform-browser';constructor( private titleService: Title) { }this.titleService.setTitle("title"); 但是，在每个页面都写一次是不是很繁琐呢，也不利于管...
复制链接

扫一扫