Passing parent component data to child via routerLink

Question

I have a parent component that has a this button in the html template:

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

The above seems to work as I get the edit-alias-detail works! output. But I'd like to pass some data from the parent to the child component so I tried this:

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

I get this error in the developer console:

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

I haven't used routerLinks before and I am rather new to angular 2.

Any help is appreciate. Thanks!

Answer 1

in such way of navigation you can pass queryParams

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

then in .ts

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

but at the end your url will look like: /modify-alias-detail?aliasName=....