如何将我的路由绑定到angular-material2 2中的stepper？

Question

我使用的是angular-material2 2的Stepper component，我希望这些步骤反映在我的应用程序的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;
    }
});`

仅供参考，我使用stepper的@Output() animationDone: EventEmitter<void>修改了网址。