Question

我有两个链接和网址，我是ngOnInit动态获取的。

<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' },
];

但是当我启动应用程序时，这些链接是活动的。点击改变网址的链接后，它们开始正常工作。

默认情况下，这些链接（网址）可能为空且始终处于活动状态？我该如何解决这个问题？

Answer 1

首先，编写[routerLink]（使用[ ]）会使指令期望一个数组，因此您的代码应该是：

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

但我认为问题是由于代码的异步性质：routerLinkActive在 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()。解决方案将获取＆＃34;模式＆＃34;然后通过ActivatedRoute.data["mode"]将其传递给组件。请参阅有关Resolve的文档：https://angular.io/docs/ts/latest/guide/router.html#resolve-guard

如果包含routerLinks的组件是另一个组件的子组件，您可以在父组件内调用this.dataService.getOptions()并传递＆＃34;模式＆＃34;通过@Input。
给孩子

在这两种情况下，想法都是一样的：找出＆＃34;模式＆＃34; 之前激活包含routerLinks的组件，因此您可以在执行 welcomeUrl之前设置dashboardUrl和routerLinkActive变量。

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

Answer 2

尝试一下：

d_sf$dst <- map_dbl(1:nrow(d_sf), function(x){
  x <- d_sf[x,]
  y <- centers_sf[centers_sf$g == x$g,]
  st_distance(x, y)
})

这可以帮助您： https://github.com/angular/angular/issues/18469

默认情况下，routerLinkActive用于动态路由是活动的Angular 2

2 个答案: