代码之家 › 专栏 › 技术社区 › ineedtoknow

将展开面板设置为展开,但也显示动画

angular9 angular-material animation angular

ineedtoknow · 技术社区 · 6 年前

我在一个Angular 9项目中工作,使用材料。

我有一个带有 mat-accordian 有几个 mat-expansion-panel 它在里面。在 constructor 在这个组件中,我看一下 router.events 查看 url .然后,我根据url路由中的内容设置要扩展的扩展面板。

问题是,当我这样做时,页面加载时面板只是打开的(这很有意义)。但是,我希望动画在我设置为打开的扩展面板上播放(页面加载后)。有办法做到这一点吗?

我会提供我的代码,如果这有助于显示我在做什么:

组成部分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>

我将感谢任何帮助和建议。谢谢

0 回复 | 直到 6 年前

cvb 6 年前

构造函数将首先运行。因此,您仍然可以在构造函数中获取路由信息,但是,您应该在ngAfterViewInit()生命周期挂钩中设置一个expandedPanel属性,而不是构造函数。

比如:

   ...
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;
    }
}
...

推荐文章

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

Bitan Basak · 使垫子自动完成功能类似于Bootstrap选择

1 年前