通過routerLink將父組件數據傳遞給子組件

Question

我有一個父組件，在html模板中有一個這個按鈕：

<button class="button" [routerLink]="['/modify-alias-detail']">Next</button>

以上似乎工作，因為我得到edit-alias-detail works! 輸出。 但我想將一些數據從父組件傳遞給子組件，所以我嘗試了這個：

<button class="button" [routerLink]="['/modify-alias-detail', aliasName.value]">Next</button>

我在開發者控制台中收到此錯誤：

EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'modify-alias-detail//'

我以前沒有使用過routerLinks而且我對angular 2更新。

任何幫助都很感激。 謝謝！

Answer 1

在這種導航方式中，您可以傳遞queryParams

<button class="button" (click)="goToAliasDetails(aliasName.value)">Next</button>

然后在.ts

goToAliasDetails(aliasName: string) {
    this.router.navigate(['/modify-alias-detail'], {queryParams: {aliasName}});
}

但最后你的網址將如下所示：/ modify-alias-detail？aliasName = ....