通过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 = ....