Установите панель расширения, чтобы она была расширена, но также показывала анимацию

Question

Я работаю в проекте Angular 9, используя материал.

У меня есть компонент с mat-accordian с несколькими mat-expansion-panel с внутри. В constructor этого компонента я смотрю на router.events для просмотра url. Затем я устанавливаю, какую панель расширения я хочу расширить в зависимости от того, что находится в маршруте URL.

Проблема заключается в том, что когда я делаю это, панель просто открывается при загрузке страницы (что имеет смысл). Однако я хочу, чтобы анимация воспроизводилась на открытой панели расширения (после загрузки страницы). Есть ли способ сделать это?

Я предоставлю свой код, если это поможет показать, что я делаю:

component.ts:

...
export class Component implements OnInit {
  routerSubscription: Subscription;
  expandPanel1 = false;
  expandPanel2 = false;

  constructor(private router: Router) {
    this.routerSubscription = this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe(event => {
        if (event["url"].includes("/panel-1")) {
          this.expandPanel1 = true;
        } else {
          this.expandPanel2 = true;
        }
      });
  }
...
setRoute(path: string) {
    this.router.navigate([`home/${path}`]);
  }
...

компонент. html:

<mat-accordion>
  <mat-expansion-panel [expanded]="expandPanel1" (opened)="setRoute('panel-1')">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 1
      </mat-panel-title>
    </mat-expansion-panel-header>
    panel text filler
  </mat-expansion-panel>
  <mat-expansion-panel [expanded]="expandPanel2" (opened)="setRoute('panel-2')">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 2
      </mat-panel-title>
    </mat-expansion-panel-header>
     panel text filler
  </mat-expansion-panel>
</mat-accordion>

Буду признателен за любую помощь и совет. Спасибо!

Answer 1

Конструктор будет запускаться первым, прежде чем что-либо еще. Таким образом, вы все равно можете получить информацию о маршруте в конструкторе, но вы должны установить одно из свойств extendedPanel внутри хука жизненного цикла ngAfterViewInit () вместо конструктора.

Так что-то вроде:

   ...
export class Component implements OnInit, AfterViewInit {
  routerSubscription: Subscription;
  expandPanel1 = false;
  expandPanel2 = false;
  urlInfo: string;

  constructor(private router: Router) {
    this.routerSubscription = this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe(event => {
        urlInfo = event["url"];

      });
  }
...
setRoute(path: string) {
    this.router.navigate([`home/${path}`]);
  }

ngAfterViewInit(){
    if (this.urlInfo.includes("/panel-1")) {
         this.expandPanel1 = true;
    } 
    else {
        this.expandPanel2 = true;
    }
}
...