angular - 在使用 Angular 6 时，我发现无法使用常量 typescript 文件作为路由路径

Question

例如假设我有一个家庭组件

home.component.html, home.component.ts

在 home.component.html 文件中，我有要路由的 anchor 链接

<a id="routeDashboard" [routerLink]="['/dashboard']">Dashboard</a>

所以我想要的是 - 我们可以有一些恒定的路由路径文件，即从 html 文件引用，而不是直接在这里硬编码路由路径。

Answer 1

检查 Angular RouterLink ，您的代码应该是:

<a id="routeDashboard" [routerLink]="['/dashboard']">Dashboard</a>

或

<a id="routeDashboard" routerLink="/dashboard">Dashboard</a>

引用文档:

If the link is static, you can use the directive as follows: routerLink="/user/bob">link to user component

您可以将链接写入常量文件或 home.component.ts 文件 home.component.ts

links = [
    {id: 'routeDashborad', path: '/dashboard, name: 'Dashboard'},
    {id: 'routeProfile', path: '/profile', name: 'Profile'}
]

home.component.html

<div *ngFor="let link of links">
    <a [id]="link.id" [routerLink]="[link.path]">{{ link.name }}</a>
</div>

已添加:

如果我们将链接放入文件constants.ts

export class Constants {
    public static links = [{...}]
}

您可以将其导入到 home.component.ts 文件中:

import { Constants } from '/path/to/constants/file';

links = Constants.links;