angular - 动态路由的 routerLinkActive 默认处于事件状态 Angular 2

Question

我有两个由 ngOnInit 动态获取的链接和 url。

<li><a [routerLink]="welcomeUrl" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Getting Started</a></li>
<li><a [routerLink]="dashboardUrl" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Dashboard</a></li>

这是我的组件:

ngOnInit() {
        this.dataService.getOptions().subscribe((options: Options) => {
            if (options.mode.toLowerCase() === "live") {
                this.dashboardUrl = '/';
                this.welcomeUrl = 'welcome';
            } else {
                this.dataService.getName().subscribe((name: string) => {
                    this.dashboardUrl = name;
                    this.welcomeUrl = name + '/welcome';
                });
            }
        });
    }

和路线:

const routes: Routes = [
    { path: '', component: DashboardComponent },
    { path: 'welcome', loadChildren: 'app/welcome/welcome.module#WelcomeModule' },
    { path: ':name', component: DashboardComponent },
    { path: ':name/welcome', loadChildren: 'app/welcome/welcome.module#WelcomeModule' },
];

但是当我启动应用程序时，这些链接处于事件状态。单击更改 url 的链接后，它们开始正常工作。

默认情况下这些链接(url)可能是空的并且始终处于事件状态？我该如何解决这个问题？

Answer 1

首先，编写 [routerLink] (使用 [ ])使指令需要一个数组，因此您的代码应为:

<a [routerLink]="welcomeUrl" routerLinkActive="active">...</a>

但我认为问题是由于代码的异步性质造成的:routerLinkActive 在before 设置welcomeUrl 之前执行，但它不能做好它的工作。

解决方案#1:用 *ngIf 封装链接(快速但肮脏)

用测试包装链接，仅在设置变量后才显示它们:

<ul *ngIf="welcomeUrl && dashboardUrl">
  <li><a [routerLink]="welcomeUrl" routerLinkActive="active">Getting Started</a></li>
  <li><a [routerLink]="dashboardUrl" routerLinkActive="active">Dashboard</a></li>
</ul>

解决方案#2:移动异步调用(更健壮，但工作量更大)

另一个选择是将异步调用 — this.dataService.getOptions() — 移动到在包含 routerLinks 的组件被激活之前执行的位置。

如果不知道组件的组织方式，就很难更具体，但是:

• 如果包含 routerLinks 的组件是路由组件，您可以在其路由声明中添加 resolve 参数并调用 this.dataService.getOptions() 内的解析。解析将获取“模式”，然后通过ActivatedRoute.data[“mode”]将其传递给组件。请参阅有关解决的文档:https://angular.io/docs/ts/latest/guide/router.html#resolve-guard
• 如果包含 routerLinks 的组件是另一个组件的子组件，您可以在父组件中调用 this.dataService.getOptions() 并传递“mode”通过 @Input 给子级。

在这两种情况下，想法是相同的:在激活包含 routerLinks 的组件之前找出“模式”，以便您可以设置 welcomeUrl 和 dashboardUrl 变量在 routerLinkActive 执行之前。

要测试异步调用是否确实是问题的原因，请尝试 *ngIf 解决方案并查看其是否有效。