動態內容。更改組件基於鏈接點擊

而且我有組件，他們每個人都與menubar有關係。

menubar和home預裝在root組件中。

我現在要做的是讓menubar導航鏈接改變家裏的內容（特別是說home組件會改成另一個組件）。

現在，問題是，鏈接沒有工作，它不會改變任何東西。 home無法更改。

app.component.html

<main> 
    <app-menubar></app-menubar> 
    <app-home ng-include="template"></app-home> 
</main>

menubar.component.html

<ul> 
    <a href="#" ng-click="template='src/app/home/home.component.html'"><li><img src="src/news.svg" alt="news"><span>Home</span></li></a> 
    <a href="#" ng-click="template='src/app/contact/contact.component.html'"><li><img src="src/contact.svg" alt="contact"><span>Contact</span></li></a> 
    <a href="#" ng-click="template='src/app/about/about.component.html'"><li><img src="src/about us.svg" alt="about us"><span>About</span></li></a> 
</ul>

來源

2017-04-25 bidipeppercrap

你進去看了角教程？ this one適用於Angular 2，但它仍應涵蓋您要做的所有事情。

對於這一點，你可以使用一個路由器模塊（你將在角幾乎總是使用，它很酷）的步驟如下：

設置路由器模塊
插入你的鏈接（每個頁面，與它的組件相對鏈接）
替換爲你的鏈接在menubar.component.html：

<a routerLink="/welcome-page">Welcome</a>

不要忘了還包括標籤如下：<router-outlet></router-outlet>

這個標籤將包含所有的網頁源並且是角路由器鏈接映射到

一旦你得到它，這真的很容易和方便

來源

2017-04-25 11:55:39 Yato

我已經查找了Angular Tutorials，但是這是最合乎邏輯的方法。我會嘗試你給我的。 – bidipeppercrap

謝謝，所以這就是他們所說的動態內容「路由」。我會搜索該關鍵字。 – bidipeppercrap

是的，對於正常的網頁開發，你將是一個完美的方法:)但是，由於Angular將所有「頁面」作爲單頁面應用程序來運行，因此需要用一些不同的方式來組織鏈接等，因爲使用正常的鏈接，瀏覽器通常會重新加載頁面，如果您編程一個單頁面應用程序，這不是您想要的。這與傳統的鏈接並不遙遠，你只需要設置一個路由器，這對教程沒有什麼大不了的，並且提供了管理應用程序之後的一個很好的方法（除了已經啓用角度路由）外。祝你好運:) – Yato

動態內容。更改組件基於鏈接點擊

回答

相關問題