Question

我使用Angular 2 RC.4和新的Router（自RC.2起）。我知道[routerLink]指令用于生成URL，但是如何使用从API服务器获取的参数来设置链接？

// Getting errors because self is undefined...
<a [routerLink]="['/users', 'edit', self.id]">Update Profile</a>

// Then, using Safe Navigation Operator but getting errors...
<a [routerLink]="['/users', 'edit', self?.id]">Update Profile</a>

Answer 1

确保您在组件上填充所需的信息。

@Component({
   selector: 'foo',
   template: `
      <a [routerLink]="['/users', 'edit', id]">Update Profile<a>
   `
})
export class FooComponent {
   id: number;
   constructor () {
       myHttpCall().then((user) => { this.id = user.id });
   }
}

您只能访问this上的模板中的信息。

Answer 2

<a [routerLink]="['/users', 'edit', self?.id]">Update Profile</a> - 如果组件中有自变量，则不会出错。既然你正在访问这个？ - 我可以假设self是异步填充的。一旦掌握了数据，这将有效。但是如果用户在数据加载之前点击，那么它一定会失败。

您可以使用*ngIf并在数据可用时显示链接如果从API加载数据并且您正在使用Observables，那么您可以执行(self | async)?.id之类的操作 - 但除非加载了链接，否则链接将再次出现最后，我认为你可以使用这样的东西来保证安全在模板中 ```

<button (click)="gotoUpdate()">Update Profile</button>

And in component

gotoUpdate() {
  if(self) {
    this.router.navigate(['/users', 'edit', self.id]);
  }
}

```

在上述方法中，你需要确保在数据可用之前不点击按钮，因为if条件但是在你有数据之前点击不会做任何事情

如何在Angular2中设置动态链接？

2 个答案: