angular4 路由跳转 title的设置

阳光穿透心脏的1/2处 2023-10-09 11:24 38阅读 0赞

路由跳转代码如下，构造器导入路由router：

constructor(
        aaa...
        private router: Router,
        bbb...
      ) { }
    
    
      toUrlPage(){
        let params = { queryParams: { optType: 'apply' } };
        setTimeout(() => {
          this.router.navigate(['/setup/msgsignatureform'], params);
        }, 500);
    
        // this.router.navigate(["/setup/msgsignatureform"],{queryParams:{optType:'apply'}});
      }

MessageRoutingModule中路由设置：

const routes: Routes = [
      {path:'msgsignatureform',children: [{path: '',component: MsgSignatureFormComponent,pathMatch: 'full', data:{reuse: true,title:'短信签名申请'}}]}
    ];
    
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
    export class MessageRoutingModule { }

其中 data:\{reuse: true,title:'短信签名申请'\} ：

reuse表示打开的页面可复用（点击其他title页时，不会关闭路由的页面）

title表示设置路由到的页面的title标签名称

效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIzNzcxMzQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIzNzcxMzQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190925113909835.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIzNzcxMzQ=,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，38人围观）

还没有评论，来说两句吧...

相关阅读

相关 angular4 路由跳转 title的设置

路由跳转代码如下，构造器导入路由router： constructor( aaa... private router: Router,

阳光穿透心脏的1/2处/ 2023年10月09日 11:24/ 0 赞/ 39 阅读

相关 Vue 路由及路由跳转

让根组件自动的挂载其它组件，而不是手动挂载。 1. 安装： > cnpm install vue-router --save 1. 在main.js中引入并使用v

朴灿烈づ我的快乐病毒、/ 2022年12月22日 14:29/ 0 赞/ 275 阅读

相关 angular 未登录状态拦截路由跳转

使用angularjs的但页面应用时，由于是本地路由在控制页面跳转，但是有的时候我们需要判断用户是否登录来判断用户是否能进入界面。 angularjs是mvc架构所以实现起来

青旅半醒/ 2022年06月07日 05:13/ 0 赞/ 283 阅读

相关 Angular4--路由基础

【背景】最近在学习Angular，迫不及待的想把学习到的内容跟大家分享。【内容】 1.实现一个简单的路由（1）使用angular-cli创建一个带路由的项目

素颜马尾好姑娘i/ 2022年06月01日 00:23/ 0 赞/ 240 阅读

相关详解Angular4.x学习笔记--路由Router类的跳转navigate

在学习的过程中路由（router）机制是离不开的，并且路由传参那更是不可避免的。今天就来详细聊聊angular4的路由传参的几种实现方式首先路由配置Route：

深藏阁楼爱情的钟/ 2022年05月29日 11:48/ 0 赞/ 168 阅读

相关 angular路由跳转页面地址栏跳转但是页面没有变化

angular路由跳转页面地址栏跳转但是页面没有变化出现这个问题基本就是路由配置错误 ng路由跳转需要在app.module.ts里面配置相对应的路由 ng gener

「爱情、让人受尽委屈。」/ 2022年05月08日 07:34/ 0 赞/ 739 阅读

相关 vue 跳转路由修改页面title为对应路由名字

vue-router 跳转页面的时候，修改页面的title为对应的路由 routes: [ { // 默认的首页

柔情只为你懂/ 2022年03月11日 06:40/ 0 赞/ 692 阅读

相关 Angular 4 子路由

子子路由 ![158914-20170814132405428-297560221.png][] 现在要为产品组件增加两个子组件 1. 创建productDesc和sel

╰+攻爆jí腚メ/ 2022年02月01日 01:31/ 0 赞/ 253 阅读

相关【Vue】路由跳转

路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里插入图片描述][watermark_

清疚/ 2021年12月15日 06:55/ 0 赞/ 482 阅读

相关 Angular学习(三)【指令生命周期，路由跳转】

指令的生命周期指令与组件的基本结构非常相似，差别在于组件中包含了模板。组件的部分生命周期方法与指令的相同，下面来看一下： ngOnInit `ngOnInit`

深藏阁楼爱情的钟/ 2021年06月26日 16:06/ 0 赞/ 492 阅读