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

Question

我正在使用 Stepper component angular-material2，我希望这些步骤反射(reflect)在我的应用程序的 URL 路由中，以便用户可以共享 URL 链接并立即进入正确的步骤。可能吗？

Answer 1

您需要从'@angular/common' 注入(inject)并使用定位服务:

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 的步进器。