routerLinkActive动态路由默认为活动Angular 2

我有两个链接和url我动态获取ngOnInit。routerLinkActive动态路由默认为活动Angular 2

<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）是空的并且始终处于活动状态？我该如何解决这个问题？

来源

2017-02-17 A. Gladkiy

首先，写[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() - 在之前执行的点将激活包含routerLink的组件。

很难是不知道如何您的组件的组织方式更加具体，但：

如果包含routerLinks组件是路由组件，你可以一个resolve PARAM添加到其航线申报和在解析里面调用this.dataService.getOptions()。解决方案将获取“模式”，然后通过ActivatedRoute.data["mode"]传递给组件。查看解析文档：https://angular.io/docs/ts/latest/guide/router.html#resolve-guard

如果包含routerLinks组件是另一个组件的子组件，你可以调用this.dataService.getOptions()父内，并通过@Input通过“模式”给孩子。

在这两种情况下，这个想法是一样的：找出“模式” 前启动包含routerLinks组件，这样你就可以在执行routerLinkActive之前设置welcomeUrl和dashboardUrl变量。

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

来源

2017-02-17 10:45:59 AngularChef

我已修复，现在我没有任何活动链接，但dashboardUrl（“/”）应该处于活动状态。 –

我认为你的语法不对。请看看这个https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding我没有看到任何使用，如你所说。 –

您将* property binding *（您发送的链接）与* Angular指令*（例如'routerLink'）混淆在一起。绑定到DOM属性，例如''，与使用Angular指令不一样。你可以通过包含你的路线声明来更新你的问题吗？我认为混乱来自什么'welcomeUrl'和'dashboardUrl'代表... – AngularChef

routerLinkActive动态路由默认为活动Angular 2

回答

相关问题