Angular 4 + вкладки Md2: активировать вкладку при возвращении на страницу

Question

Мое приложение в Angular 4 и использует Md2 модуль для вкладок . То, чего я пытаюсь добиться, это в основном установить активную вкладку на Список покупок вкладка вместо вкладки по умолчанию Краткое описание ТОЛЬКО при возврате пользователя из Продукт страница Подробное описание потока приведено на рисунке ниже.

иллюстрации потока

Вот код:

детали проекта. компонент. html:

<md2-tabs [selectedIndex]=”activeTabIndex”>
    <md2-tab label=”Design Brief”></md2-tab>
    <md2-tab label=”Shopping List”></md2-tab>
</md2-tabs>

project-details.component.ts:

export class ProjectDetailsComponent implements OnInit {
    activeTabIndex: number = 0;

    constructor(private router: Router) {}

    ngOnInit() {
        this.router.events
            .filter((e: any) => e instanceof NavigationEnd)
            .subscribe((e: any) => {
                this.activeTabIndex = e[0].urlAfterRedirects.startsWith("/product")
                    ? 1
                    : 0;
            });
    }
}

product.component. html:

<button (click)="onCancel()"> X </button>

product.component.ts:

export class ProductComponent implements OnInit {
    constructor(private location: Location) {}

    onCancel() {
        this.location.back();
    }
}

Мои вопросы (при использовании модуля Angular 4 / Md2, так как мы не рассматриваем вопрос об обновлении Angular версии или внедрении Материала Angular в данный момент):

• Как получить атрибут selectedIndex для <md2-tabs>, динамически изменяемый при изменении activeTabIndex prop в функции subscribe? (в настоящее время изменения происходят в функции subscribe, но кажется, что свойство activeTabIndex не обновлено.
• Существуют ли другие возможности, на которые я должен обратить внимание, чтобы вернуть пользователя к этому Список покупок вкладка, когда они приходят со страницы продукта?

Любая помощь будет очень признателен! :)

Answer 1

Попробуйте сделать

 <md2-tabs>
    <md2-tab [active]="designActive" label=”Design Brief”></md2-tab>
    <md2-tab [active]="listActive" label=”Shopping List”></md2-tab>
</md2-tabs>

designActive = false;
listActive = false;

ngOnInit() {
        this.router.events
            .filter((e: any) => e instanceof NavigationEnd)
            .subscribe((e: any) => {
                this.activeTabIndex = e[0].urlAfterRedirects.startsWith("/product")
                    if (e[0].urlAfterRedirects.startsWith('/products')) {
                     this.listActive = true;
                   } else {
                      this.designActive = true; 
                   }
            });
    }

Поместите console.log в if и else и посмотрите, в какой раздел он попадает.