Routing a page using Material select, and routerLink, Angular 6

Question

So currently I'm routing to a page to get a list of documents from a policy. I'm also bringing in all of the policies so you can navigate through the select form and re-route you to it with the policy number passed. Is there a way to get on selection of the option to navigate using the new url?

<mat-form-field name="selectPolicy">
    <mat-select placeholder="Change Policy">
        <mat-option *ngFor="let policy of policies" 
            [routerLink]="['../', policy.policyNbr]">{{policy.policyTypeDesc}}
            #{{policy.policyNbr}}
        </mat-option>
    </mat-select>
</mat-form-field>

As of right now, this changes my url, but does submit to the new page once changed.

Answer 1

 //assuming you have a route set up to take the value as a param navigateTo(value){ console.log(value); this.router.navigate(['../',value]); }

 <mat-form-field name="selectPolicy"> <mat-select placeholder="Change Policy" (selectionChange)="navigateTo($event.value)"> <mat-option *ngFor="let policy of policies" [value]="policy.policyNbr"> #{{policy.policyNbr}} </mat-option> </mat-select> </mat-form-field>

Answer 2

在课堂上，如果你有一个，可以在 ngOnInit 之后