Angular 2 更改路线(使用模板和指令)

示例

现在已经设置了路由,我们需要一些方法来实际更改路由。

此示例将显示如何使用模板更改路由,但是可以在TypeScript中更改路由。

这是一个示例(无绑定):

<a routerLink="/home">Home</a>

如果用户单击该链接,它将链接到/home。路由器知道如何处理/home,因此它将显示HomeComponent。

这是数据绑定的示例:

<a *ngFor="let link of links" [routerLink]="link">{{link}}</a>

这将需要一个称为links存在的数组,因此将其添加到app.ts:

public links[] = [
    'home',
    'login'
]

这将遍历数组,并<a>使用routerLink指令=数组中当前元素的值添加元素,从而创建以下代码:

 <a routerLink="home">home</a>
 <a routerLink="login">login</a>

如果您有很多链接,或者可能需要不断更改链接,这将特别有用。我们通过仅向Angular提供所需的信息,让Angular处理添加链接的繁忙工作。

目前,它links[]是静态的,但有可能从其他来源获取数据。