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. Webpack4.0各个击破(7)plugin篇

    目录 一. plugin概述 1.1 Plugin的作用 1.2 Compiler 1.3 Compilation 二. 如何写一个plugin 四. 实战 [参考] 一. plugin概述 1.1 ...

  2. Eclipse插件springsource-tool-suite的下载和安装

    根据佟刚Spring课程,装完这个插件,再利用maven构建工程,爽 课程:https://www.bilibili.com/video/av21335209?from=search&seid ...

  3. Language Guide (proto3) | proto3 语言指南(八)未知字段和任意类型

    未知字段和任意类型篇幅较少,因此将他们合并到本文进行描述. Unknown Fields - 未知字段 未知字段是格式良好的协议缓冲区序列化数据,表示解析器无法识别的字段.例如,当一个旧二进制代码解析 ...

  4. string知识

    因为历史原因以及为了与C语言兼容,字符串字面值与标准库string类型不是同一种类型.这一点很容易引起混乱,编程时一定要注意区分字符串字面值和string数据类型的使用,这很重要. 额~~~C字符串是 ...

  5. DEDECMS:DEDE整合(UEditor)百度编辑器以后,栏目内容、单页无法保存内容的bug处理方法

    已经整合过百度编辑器的站长们或许会发现,在编辑单页文档和栏目内容的时候,百度编辑器不能够保存新增或已修改数据,经过排查后发现问题出现在catalog_edit.htm.catalog_add.htm这 ...

  6. ElasticSearch 安装与运行

    公号:码农充电站pro 主页:https://codeshellme.github.io 本节来介绍 ES 的安装. 1,下载 ES ES 是基于 Java 语言开发的,因此,要安装 ES,首先需要有 ...

  7. 什么?还不懂c++vector的用法,你凭什么勇气来的!

  8. hdu 6795 Little W and Contest 并查集+排列组合

    题意: t组输入,有n个人,刚开始谁也不认识谁.每一个人有一个权值w[i](1<=w[i]<=2),你要挑选3个互相不认识的人组成一个队,且要保证3个人权值之和大于等于5(也就意味着最少要 ...

  9. python的re模块一些方法 && Tkinter图形界面设计 && 终止python运行函数 && python读写文件 && python一旦给字符串赋值就不能单独改变某个字符,除非重新给变量赋值

    Tkinter图形界面设计见:https://www.cnblogs.com/pywjh/p/9527828.html#radiobutton 终止python运行函数: 采用sys.exit(0)正 ...

  10. hdu1828 Picture(线段树+扫描线+矩形周长)

    看这篇博客前可以看一下扫描线求面积:线段树扫描线(一.Atlantis HDU - 1542(覆盖面积) 二.覆盖的面积 HDU - 1255(重叠两次的面积))  解法一·:两次扫描线 如图我们可以 ...