在 Angular 2 中解析应用程序组件的正确方法

Question

我正在开发一个基于域提取其站点副本的应用程序。我的应用程序运行时有一个例外。我在 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'},

如果有人对完成这项任务的最佳方法有任何想法，我将不胜感激。先感谢您。

请注意，我提供的代码只是示例代码，而不是来自我的实际代码库，我只是想说明我当前遇到的问题。

Answer 1

我处理这个问题的方法是在 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 中定义的解析将可供其中的所有组件（以及所有子路由）使用。

希望这能让您更接近您想要的东西。