Question

我使用AngularJS 4，

我有组件，每个组件都与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>

Answer 1

你看过Angular-Tutorial吗？ this one适用于Angular 2，但它仍应涵盖您尝试做的所有事情。

为此，您将使用路由器模块（您几乎总是在Angular中使用它，它非常酷）步骤如下：

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

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

不要忘记还包含以下标记：<router-outlet></router-outlet>

此标记将包含所有页面源，并且是Angular将路由器链接映射到

的位置

一旦得到它，它就非常简单方便

动态内容。根据链接点击更改组件

1 个答案: