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. 文件夹copy器(多进程版)

    import multiprocessing import os import time import random def copy_file(queue, file_name,source_fol ...

  2. deepin定制deepin-terminal

    一. 背景介绍 本人以前在win10上经常使用xshell来登陆服务器.xshell提供了很丰富的功能和快捷键.个人比较喜欢的包括三个功能 终端透明 双击时根据分隔符选中文字 突出显示 但是自从使用d ...

  3. vue项目中如何引用tinymce

    最近公司在做一个CMS系统的项目,其中富文本编辑框用的很多,目前流行的也很多,包括wangEditor.TinyMCE.百度ueditor.kindeditor.CKEditor等.经过自己的一番翻箱 ...

  4. TypeScript 入门教程学习笔记

    TypeScript 入门教程学习笔记 1. 数据类型定义 类型 实例 说明 Number let num: number = 1; 基本类型 String let myName: string = ...

  5. Jenkins Pipelines+Docker执行RobotFramework自动化测试

    一.Jenkins Pipelines介绍 Pipeline,简而言之,就是一套运行于Jenkins上的工作流框架,将原本独立运行于单个或者多个节点的任务连接起来,实现单个任务难以完成的复杂流程编排与 ...

  6. netty写Echo Server & Client完整步骤教程(图文)

    1.创建Maven工程 1.1 父节点的pom.xml代码(root pom文件) 1 <?xml version="1.0" encoding="UTF-8&qu ...

  7. ElasticSearch 安装与运行

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

  8. Docker下使用centos无法使用systemctl怎么办

    提交正在使用的容器: docker commit [ContainerId] 提交停止正在运行无法使用Systemctl的容器: docker stop [ContainerId] 删除这个容器(可选 ...

  9. switch表达式为字符串

    package EXERCISE; import java.util.*; public class HashCode { //switch判断字符串.switch表达式byte,short,int, ...

  10. 关于cnblogs至github上blog的搬迁

    由于同学的强烈抗议(由于网页太卡,而且还有bug),所以在今天完成了github上blog的搭建,并且有了良好的阅读环境; Leceue