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

回答

相關問題