Question

当我在routerLink的{{1}}属性中使用@Component指令时，它可以正常工作。

但我们正在谈论我的整个网站顶级菜单栏。但是当我把它分成我的主模板文件（layout.html）时，它就不再起作用了。

是的，对于ng2来说，这是一个巨大的菜鸟，但是，我喜欢我的菜单，以保持在javascript文件和主要布局html中。如何实现这一目标？

template

我错过了哪一个至关重要的步骤？它甚至可能吗？

谢谢！

Answer 1

routerLink是一个指令，[routerLink]="..."是对指令输入的绑定。这些都不应该在Angular2组件之外工作。

您可以使用在Angular2之外实例化并作为提供者传递的共享服务

 let service = new MyService();

 @NgModule({
   providers: [{provide: MyService: useValue: service}],
   ...
 })
 class AppModule {}

然后您可以使用service与某些Angular2组件或服务进行通信，以委托调用router.navigate(...)确实执行routerLink将会执行的操作。

另一种方法是触发事件（window.dispatchEvent(...)）并在Angular2中监听此事件。

如果可能的话，我完全避免这样的设置（在Angular2组件之外有路由器链接）。

Answer 2

你不能这样做是因为routerLink是特殊的angular2语法，它被转换为js，你的模板HTML是应用程序的引导程序，不会被转换。

通常，您要完成静态顶部栏的工作是创建一个新的顶部栏组件，并将其用作上述父应用程序中的指令，用于调用路由器插座。

实施例。在你的app.component中。你会导入你的组件

从'topnav.component'

导入{TopNav}

@Component（{selector：'my-app'，template :, directives：[TopNav]}）

您的topnav组件将包含您的路由逻辑