更改路线(使用模板指令)
既然已经建立了路线,我们需要一些方法来实际改变路线。
此示例将显示如何使用模板更改路径,但可以在 TypeScript 中更改路径。
这是一个例子(没有绑定):
<a routerLink="/home">Home</a>
如果用户点击该链接,它将路由到/home
。路由器知道如何处理/home
,因此它将显示 Home
组件。
以下是数据绑定的示例:
<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 通过向它提供所需的信息来处理添加链接的繁忙工作。
现在,links[]
是静态的,但可以从其他来源提供数据。