动态内容。更改组件基于链接点击

问题描述：

而且我有组件，他们每个人都与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>

答

你进去看了角教程？ this one适用于Angular 2，但它仍应涵盖您要做的所有事情。

对于这一点，你可以使用一个路由器模块（你将在角几乎总是使用，它很酷）的步骤如下：

设置路由器模块
插入你的链接（每个页面，与它的组件相对链接）
替换为你的链接在menubar.component.html：

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

不要忘了还包括标签如下：<router-outlet></router-outlet>

这个标签将包含所有的网页源并且是角路由器链接映射到

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

我已经查找了Angular Tutorials，但是这是最合乎逻辑的方法。我会尝试你给我的。 – bidipeppercrap

谢谢，所以这就是他们所说的动态内容“路由”。我会搜索该关键字。 – bidipeppercrap

是的，对于正常的网页开发，你将是一个完美的方法:)但是，由于Angular将所有“页面”作为单页面应用程序来运行，因此需要用一些不同的方式来组织链接等，因为使用正常的链接，浏览器通常会重新加载页面，如果您编程一个单页面应用程序，这不是您想要的。这与传统的链接并不遥远，你只需要设置一个路由器，这对教程没有什么大不了的，并且提供了管理应用程序之后的一个很好的方法（除了已经启用角度路由）外。祝你好运:) – Yato

动态内容。更改组件基于链接点击

相关推荐