ng 设置动态的document title
- 配置路由, 添加
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 {}
- 监听路由导航完毕,读取
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的更多相关文章
- react 动态修改 document.title
装饰器 // withComponents/withHeaderBar.js import React, { Component } from "react"; import He ...
- 用document.title=“xxx”动态修改title,在ios的微信下面不生效
单页应用里整个页面只会在第一次完全刷新,后面只会局部刷新(一般不包括head及里面的title),所以无法在服务器端控制title,只能在页面刷新的时候通过js修改title.常规做法如下,可惜在iO ...
- 【转】vue中动态设置meta标签和title标签
因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 { path: '/teachers', name ...
- 用document.title=“xxx”动态修改title,在ios的微信下面不生效的解决办法!
//需要jQuery var $body = $('body'); document.title = 'title'; // hack在微信等webview中无法修改document.title的情况 ...
- 基于Vue的SPA动态修改页面title的方法
最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼,而且在IOS的微信端据说没效果.百度发现要针对IOS的微信做点额外的操作,即:创建一 ...
- Vue项目添加动态浏览器头部title
0. 直接上 预览链接 + 效果图 Vue项目添加动态浏览器头部title 1. 实现思路 ( 1 ) 从路由router里面得到组件的title ( 2 ) title存vuex (本项目已经封装h ...
- 使用vue-router设置每个页面的title
进入 router 文件夹底下的index.js文件 首先引入: import Vue from 'vue' import Router from 'vue-router' 然后在路由里面配置每个路由 ...
- vue 修改单页标题 --- document.title
方法1. 在需要的组件或者页面内设置 document.title = response.data.res.title 方法2. <head> <meta http-equiv=&q ...
- vue 设置动态标题
在 router/index.js 文件中设置 meta:{title:'标题'} 和 router.beforeEach,即可实现功能, 代码如下: import { createRouter, c ...
随机推荐
- 文件夹copy器(多进程版)
import multiprocessing import os import time import random def copy_file(queue, file_name,source_fol ...
- deepin定制deepin-terminal
一. 背景介绍 本人以前在win10上经常使用xshell来登陆服务器.xshell提供了很丰富的功能和快捷键.个人比较喜欢的包括三个功能 终端透明 双击时根据分隔符选中文字 突出显示 但是自从使用d ...
- vue项目中如何引用tinymce
最近公司在做一个CMS系统的项目,其中富文本编辑框用的很多,目前流行的也很多,包括wangEditor.TinyMCE.百度ueditor.kindeditor.CKEditor等.经过自己的一番翻箱 ...
- TypeScript 入门教程学习笔记
TypeScript 入门教程学习笔记 1. 数据类型定义 类型 实例 说明 Number let num: number = 1; 基本类型 String let myName: string = ...
- Jenkins Pipelines+Docker执行RobotFramework自动化测试
一.Jenkins Pipelines介绍 Pipeline,简而言之,就是一套运行于Jenkins上的工作流框架,将原本独立运行于单个或者多个节点的任务连接起来,实现单个任务难以完成的复杂流程编排与 ...
- netty写Echo Server & Client完整步骤教程(图文)
1.创建Maven工程 1.1 父节点的pom.xml代码(root pom文件) 1 <?xml version="1.0" encoding="UTF-8&qu ...
- ElasticSearch 安装与运行
公号:码农充电站pro 主页:https://codeshellme.github.io 本节来介绍 ES 的安装. 1,下载 ES ES 是基于 Java 语言开发的,因此,要安装 ES,首先需要有 ...
- Docker下使用centos无法使用systemctl怎么办
提交正在使用的容器: docker commit [ContainerId] 提交停止正在运行无法使用Systemctl的容器: docker stop [ContainerId] 删除这个容器(可选 ...
- switch表达式为字符串
package EXERCISE; import java.util.*; public class HashCode { //switch判断字符串.switch表达式byte,short,int, ...
- 关于cnblogs至github上blog的搬迁
由于同学的强烈抗议(由于网页太卡,而且还有bug),所以在今天完成了github上blog的搭建,并且有了良好的阅读环境; Leceue