在基础html中Angular 2中组件模板之外的routerLink

Question

当我在@Component的template属性中使用routerLink指令时，它可以工作。

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

是的，我是一个巨大的菜鸟到ng2，不可否认，但我希望我的菜单保持在javascript文件和主要布局html内。 怎么能做到这一点？

<body>
    <base href="/" />
    <div class="row menu">
        <div class="container">
            <ul class="u-pull-left">
                <li><a [routerLink]="['/']" routerLinkActive="active">Home</a></li>
                <li>Notifications</li>
                <li>My Hisses</li>
            </ul>
            <ul class="u-pull-right">
                <li><a [routerLink]="['/register']" routerLinkActive="">Register</a></li>
                <li><a [routerLink]="['/login']" routerLinkActive="active">Login</a></li>
            </ul>
        </div>
    </div>

  <root></root>
<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>

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

谢谢！

Answer 1

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

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

 let service = new MyService();

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

然后你可以使用service与一些Angular2组件或service进行通信，以委托调用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组件将包含您的路由逻辑

在基础html中Angular 2中组件模板之外的routerLink

问题描述

2 个解决方案

解决方案1
2 2016-09-28 06:47:00

解决方案2
0 2016-09-28 06:55:53

在基础html中Angular 2中组件模板之外的routerLink

问题描述

2 个解决方案

解决方案1 2 2016-09-28 06:47:00

解决方案2 0 2016-09-28 06:55:53

解决方案1
2 2016-09-28 06:47:00

解决方案2
0 2016-09-28 06:55:53