如何将我的路线绑定到angular-material2中的步进器？

Question

我正在使用angular-material2的Stepper组件 ，我希望这些步骤能够反映在我的应用程序的URL路由中，以便用户可以共享URL链接并立即获得正确的步骤。 可能吗？

Answer 1

您需要从'@angular/common'注入并使用位置服务：

1）更改位置服务的URL调用go功能。 例：

if (this.stepper.selected.label === 'subscriber') { 
    this.location.go('./enrollment/subscriberInfo');
}

2）在URL更改后更改步进器，调用位置服务的用户功能。 例：

this.location.subscribe( () => {
    if (this.location.isCurrentPathEqualTo('/enrollment/subscriberInfo')) {
        this.stepper.selectedIndex = 0;
    }
    if (this.location.isCurrentPathEqualTo('/enrollment/payment')) {
        this.stepper.selectedIndex = 1;
    } 
    if (this.location.isCurrentPathEqualTo('/enrollment/agreement')) {
        this.stepper.selectedIndex = 2;
    }
});`

仅供参考，我使用了@Output() animationDone: EventEmitter<void>来更改URL。