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

当我在我的@Component的template属性中使用routerLink指令时，它可以工作。routerLink在Angular 2中的组件模板之外，基于html

但我们正在谈论我的整个网站的顶部菜单栏。但是，当我将它分离出来到我的主要模板文件（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>

我错过了哪一个关键步骤？它甚至有可能吗？

谢谢！

来源

2016-09-28 RedactedProfile

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部件外路由器链接）完全。

来源

2016-09-28 06:47:00

嗨，感谢您的回复。所以如果我对把我的整个顶级菜单作为另一个ng2组件的一部分不感兴趣，我应该让它成为静态的，并让它刷新页面？我只是想在这里想办法与 – RedactedProfile

一起前进，我认为这是不值得的麻烦。如果我需要这样的设置，我会重新考虑使用Angular2。在我看来，刷新页面也是一个相当糟糕的选择。如果使用JS的[历史API]（https://developer.mozilla.org/en-US/docs/Web/API/History_API）让Angular2应用程序中的路由器更新视图，您可以尝试。也许像http://stackoverflow.com/questions/39686305/changing-shared-data-between-root-modules（或http://stackoverflow.com/questions/36566698/cant-initialize-dynamically-appended-html- component-in-angular-2 - 不是最新的）可能适合你。 –

所以你在这里告诉我的是，如果我想要使用ng2，我必须将我的整个页面结构放到一个巨大的海量组件的模板字段中，并且通过router-outlet可以吐出子组件，否则没有意义使用它？我从来没有在我的生活中看到顶级菜单栏“加载”其余的JS：p我只想在菜单栏下方和页脚上方显示动态内容。看起来像是一个非常奇怪的限制考虑ng1让你切换ngRouter页面使用指令，任何你想要他们。 – RedactedProfile

你不能这样做，因为routerLink是获取transpiled到JS特殊angular2语法和模板HTML是应用的引导和没有得到transpiled。

通常你会做完成静态顶栏的是创建一个新的顶栏组件，并使用它作为你的父应用程序上面，你打电话给你的路由器出口处的指令。

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

导入{} TopNav从 'topnav.component'

@Component（{选择： '我的应用程序内'，模板：，指令：[TopNav]}）

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

来源

2016-09-28 06:55:53

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

回答

相关问题