Angular 2中组件模板之外的routerLink，在基本html中答案

【问题标题】：routerLink outside of component template in Angular 2, in base htmlAngular 2中组件模板之外的routerLink，在基本html中
【发布时间】：2017-02-05 23:33:12
【问题描述】：

当我在@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>

我错过了哪个重要步骤？有没有可能？

谢谢！

【问题讨论】：

标签： javascript angularjs angular angular2-routing

【解决方案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 组件之外有路由器链接）。

【讨论】：

您好，感谢您的回复。因此，如果我对将整个顶部菜单作为另一个 ng2 组件的一部分不是非常感兴趣，我是否应该让它保持静态，并让它刷新页面？我只是想在这里想出一种方法来继续前进
我认为这不值得麻烦。如果我需要这样的设置，我会重新考虑使用 Angular2。在我看来，刷新页面也是一个相当糟糕的选择。您可以尝试使用 JS 中的 history API 使 Angular2 应用程序中的路由器更新视图。也许像stackoverflow.com/questions/39686305/…（或stackoverflow.com/questions/36566698/… - 不是最新的）这样的东西可能适合你。
所以你在这里告诉我的是，如果我想使用 ng2，我必须将我的整个页面结构交给一个巨大的海量组件的模板字段，并且通过路由器出口可以吐出子组件，否则没有意义使用它？我一生中从未见过顶部菜单栏与 JS 的其余部分一起“加载”：p 我只想要菜单栏下方和页脚上方的东西来显示动态内容。考虑到 ng1 允许您使用指令切换 ngRouter 页面，这似乎是一个非常奇怪的限制。
即使暂时忘记了路由器组件，回到标准的服务器端页面加载。我一直都理解 angular2 完全是围绕组件结构设计的，这正是我所寻找的。但是除非我将组件添加到 ngModule 引导程序，否则我似乎无法让任何加载的组件替换它们的选择器。但是在不包含该元素的页面上，它会出错，因为它无法找到。我应该为每个页面上下文创建一个新的 ngModule 吗？
致您之前的评论。是的，这基本上就是我要说的。如果你以这种方式使用 Angular2，我认为你不会对它感到满意。最好的方法是将根组件视为“页面”。对于您的最后一条评论 - 这也主要是因为您没有一个包含整个页面的根组件。我假设 Angular 团队会为您的场景添加一些支持（已讨论过多次），但这不是第一个版本的主要目标。

【解决方案2】：

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

通常，要实现静态顶栏，您需要创建一个新的顶栏组件，并将其用作您调用路由器插座的父应用程序中的指令。

示例。在你的 app.component.你会导入你的组件

从'topnav.component'导入{TopNav}

@Component({ selector : 'my-app', template : , directives: [TopNav] })

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

【讨论】：