我正在开发一个基于域提取其网站副本的应用程序。我有一个应用程序工作有一个例外。我正在app.component模板中定义应用程序的导航栏和页脚,如下所示。
<navigation></navigation>
<router-outlet></router-outlet>
<appFooter></appFooter>
在appFooter和导航的模板中,我使用下面的安全导航操作符解析数据
<p>{{copyService.copy?.somevalue}}</p>
我真正想做的是使用解析器和ActivatedRoute的数据属性来做这样的事情
var copy = this.route.snapshot.data['copy'];
应用程序组件中的。然后将数据通过输入变量传递到页脚和导航。
不幸的是,当我重定向到我的家庭组件时,我不确定如何解析应用程序组件
{ path: '', redirectTo: '/home', pathMatch: 'full'},
如果有人对完成此任务的最佳方式有任何想法,我将不胜感激。先感谢您。
请知道我提供的代码只是示例代码,而不是来自我的实际代码库我只是想说明我当前遇到的问题。
答案 0 :(得分:6)
我能够处理这个问题的方法是在app.component上添加另一个组件层。
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: '',
component: BaseComponent,
resolve: {
yourContent: contentResolver
},
children: [
{ path: 'home'... }
]
}
然后移动这些:
<navigation></navigation>
<router-outlet></router-outlet>
<appFooter></appFooter>
从base.html
app.html
您在此BaseComponent中定义的结算将可用于(以及所有子路由)中的所有组件。
希望能让你更接近你想要的东西。