1. 配置路由, 添加data.title参数
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; const routes: Routes = [
{
path: '',
component: DashComponent,
data: {
title: 'Examples',
},
},
{
path: 'enumerate-devices',
component: EnumerateDevicesComponent,
data: {
title: '查看 video audio 设备列表',
},
}
]; @NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
  1. 监听路由导航完毕,读取data.title,设置document.title
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router'; @Component({
selector: 'live-video-example-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.styl'],
})
export class AppComponent implements OnInit {
constructor(
private readonly titleService: Title,
private route: ActivatedRoute,
private readonly router: Router
) {} ngOnInit() {
this.router.events.subscribe((e) => {
if (e instanceof NavigationEnd) {
let child = this.route.firstChild;
while (child.firstChild) {
child = child.firstChild;
}
const title = child.snapshot.data['title'];
this.titleService.setTitle(title ?? 'ng app');
}
});
}
}

ng 设置动态的document title的更多相关文章

  1. react 动态修改 document.title

    装饰器 // withComponents/withHeaderBar.js import React, { Component } from "react"; import He ...

  2. 用document.title=“xxx”动态修改title,在ios的微信下面不生效

    单页应用里整个页面只会在第一次完全刷新,后面只会局部刷新(一般不包括head及里面的title),所以无法在服务器端控制title,只能在页面刷新的时候通过js修改title.常规做法如下,可惜在iO ...

  3. 【转】vue中动态设置meta标签和title标签

    因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 { path: '/teachers', name ...

  4. 用document.title=“xxx”动态修改title,在ios的微信下面不生效的解决办法!

    //需要jQuery var $body = $('body'); document.title = 'title'; // hack在微信等webview中无法修改document.title的情况 ...

  5. 基于Vue的SPA动态修改页面title的方法

    最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼,而且在IOS的微信端据说没效果.百度发现要针对IOS的微信做点额外的操作,即:创建一 ...

  6. Vue项目添加动态浏览器头部title

    0. 直接上 预览链接 + 效果图 Vue项目添加动态浏览器头部title 1. 实现思路 ( 1 ) 从路由router里面得到组件的title ( 2 ) title存vuex (本项目已经封装h ...

  7. 使用vue-router设置每个页面的title

    进入 router 文件夹底下的index.js文件 首先引入: import Vue from 'vue' import Router from 'vue-router' 然后在路由里面配置每个路由 ...

  8. vue 修改单页标题 --- document.title

    方法1. 在需要的组件或者页面内设置 document.title = response.data.res.title 方法2. <head> <meta http-equiv=&q ...

  9. vue 设置动态标题

    在 router/index.js 文件中设置 meta:{title:'标题'} 和 router.beforeEach,即可实现功能, 代码如下: import { createRouter, c ...

随机推荐

  1. LOJ10067

    LOJ10067 构造完全图 给你一棵树 T,找出 T 能扩展出的边权和最小的完全图 G. 第一行 N 表示树 T 的点数: 保证输入数据构成一棵树. 输出仅一个数,表示最小的完全图 G 的边权和. ...

  2. Prometheus 监控之 Blackbox_exporter黑盒监测

    Prometheus 监控之 Blackbox_exporter黑盒监测 1.blackbox_exporter概述 1.1 Blackbox_exporter 应用场景 2.blackbox_exp ...

  3. RabbitMQ (简单集群部署操作)

    RabbitMQ 集群部署 前期准备 第一步:三台linux系统(centos7.3) 主机名(hostname) 网卡ip node1 192.168.137.138 node2 192.168.1 ...

  4. JVM调优之垃圾定位、垃圾回收算法、垃圾处理器对比

    谈垃圾回收器之前,要先讲讲垃圾回收算法,以及JVM对垃圾的认定策略,JVM垃圾回收器是垃圾回收算法的具体实现,了解了前面的前置知识,有利于对垃圾回收器的理解. 什么是垃圾? 垃圾,主要是指堆上的对象, ...

  5. jvm系列五-java内存模型(2)

    原作者系列文章链接:并发编程系列博客传送门 前言# 在网上看了很多文章,也看了好几本书中关于JMM的介绍,我发现JMM确实是Java中比较难以理解的概念.网上很多文章中关于JMM的介绍要么是照搬了一些 ...

  6. Wormholes (spfa)

    一种路是双向的,路的长度是正值:另一种路是单向的,路的长度是负值:  如果有负环输出YES:否则输出NO:不同的路可能有相同的起点和终点:必须用邻接表 While exploring his many ...

  7. 1153 Decode Registration Card of PAT

    A registration card number of PAT consists of 4 parts: the 1st letter represents the test level, nam ...

  8. SQL Server 新安装启用sa用户/sa用户登录提示管道另一端无进程

    安装时只用windows验证 安装完成后: 首先选中服务器(右键)->属性->安全性->服务器身份验证修改为"SQL SERVER和WINDOWS身份验证模式"其 ...

  9. 004、Python xlsxwriter模块

    简单用法demo # !/usr/bin/python # coding:utf-8 # xlsxwriter的基本用法 import xlsxwriter # 1. 创建一个Excel文件 work ...

  10. HTTP笔记2--简单的HTTP 协议

    HTTP概念 HTTP用于客户端和服务器之间的通信 客户端:请求访问文本或图像等资源的一端 服务器端而提供资源响应的一端 通过请求和响应的交换达成通信 HTTP 协议规定,请求从客户端发出,最后服务器 ...