Angular2でダイナミックリンクを設定する方法は？

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> - コンポーネントに自己変数がある場合、エラーは発生しません。あなたはこれにアクセスしているからですか？ - 私は、自己が非同期に設定されていると考えることができます。これは、データを取得した後に機能します。しかし、データロード前にユーザーがクリックすると、失敗するようになります。

あなたは*ngIfを使用して、データは、データがAPIからロードされていて、観測を使用している場合、あなたは(self | async)?.idような何かを行うことができ
利用可能なときにリンクを表示することができます - それは最後に
ロードされない限り、再びリンクが不正確になります、私はあなたがテンプレート `` `

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

And in component

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

で安全 ように、このようなものを使用することができると思います 上記のアプローチでは

`` `

だけでなく、あなたがデータ