我不知道这算不算新手问题, 很抱歉

在做的项目中遇到了 一个问题 就是一些全局性的组件如何复用 ?

场景是这样的:

1.我写了一个navbar导航组件 . 而这个组件上因为有音乐播放 而放在了根组件中 用于全局.
在routing 的过程 并不会中断 audio的播放. 我希望根据不同的页面去改变上面的title

我首先想到的是用组件input去接受一个动态值 并展示. 但是后来发现router到某个组件A时 根本无法修改navbar组件的[title]=‘any text’. A中并没有组件navbar. 页面是这样的0_1529999564578_45050f4d-e8de-49d0-ae7c-57d620194129-image.png

它们并不是父子组件,所有当我使用服务去改变 里面的变量 也还是无效.

后来在网上找到了一个用于修改web title的方案 就是在根组件监听路由事件,并把路由参数设置为title 再由根组件设置navbar的title
0_1530000177454_c1aa7968-9b2d-4f26-a76a-be12beaa55aa-image.png
0_1530000022885_9a8e8ce5-5864-4196-a356-e245e1269ef9-image.png
0_1530000124115_5da02f9d-8e59-42d2-8a45-fc61bf469e04-image.png
但是这个只能是固定的title 并不是动态的 比如我需要在组件加载了user数据之后 设置navbar的title为 userName page

2.mask
在控件中使用了文件上传视频, 视频比较大 ,通常需要上传好几秒, 如果没有一个mask 去展示 ,用户根本不知道发生了什么.
所以 想做一个通用一点的mask ,看了网上一篇文章 是用动态dom 从body中插入组件的标签<app-mask> 这样去实现
感觉很违背angular的意图 所以想请教一下大家.

这中复用全局展示的组件怎么实现? 希望大家给一点建议 谢谢!