制作简化的有角度材质的手风琴，但未捕获到输出事件

Question

我正在尝试通过制作自己的版本来简化棱角材质手风琴，从而使其稍稍简化一下。我有一个stepper component：

<mat-accordion>
    <ng-content>
    </ng-content>
</mat-accordion>

这非常简单，并具有以下方法：

import {
  Component,
  AfterViewInit,
  QueryList,
  ContentChildren,
  OnDestroy,
  Input
} from "@angular/core";
import { StepComponent } from "./step.component";
import { Subscription } from "rxjs";

@Component({
  selector: "app-stepper",
  templateUrl: "./stepper.component.html",
  styleUrls: ["./stepper.component.scss"]
})
export class StepperComponent implements AfterViewInit, OnDestroy {
  @Input() closeOthers: boolean = true;
  @ContentChildren(StepComponent) children: QueryList<any>;

  step = 0;
  private subscriptions: Subscription = new Subscription();

  constructor() {}

  ngAfterViewInit() {
    this.children.forEach((child: StepComponent, i: number) => {
      this.subscriptions.add(
        child.animate.subscribe(() => {
          this.setStep(i);
        })
      );
    });
  }

  ngOnDestroy() {
    this.subscriptions.unsubscribe();
  }

  setStep(index: number) {
    this.step = index;
    console.log(this.step);
  }

  nextStep() {
    this.step++;
    console.log(this.step);
  }

  prevStep() {
    this.step--;
    console.log(this.step);
  }
}

请注意children订阅。

然后我创建了一个步骤组件

<mat-expansion-panel [expanded]="expanded"
    (click)="animateMe()">
    <mat-expansion-panel-header>
        <mat-panel-title>
            {{name}}
        </mat-panel-title>
    </mat-expansion-panel-header>
    <div>
        <ng-content>
        </ng-content>
    </div>
</mat-expansion-panel>

这是我要隐藏手风琴步骤的复杂性的地方。目前它是基本的，但请耐心等待。然后我的代码如下所示：

import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";

@Component({
  selector: "app-step",
  templateUrl: "./step.component.html",
  styleUrls: ["./step.component.scss"]
})
export class StepComponent implements OnInit {
  @Input() name: string;
  @Input() expanded: boolean;
  @Output() animate: EventEmitter<void> = new EventEmitter<void>();

  constructor() {}

  ngOnInit() {}

  animateMe() {
    console.log("clicked");
    this.animate.emit();
  }
}

注意Output事件。因此，在我的组件中，现在有了这个：

<app-stepper #stepper>
    <app-step name="Hall"
        *ngIf="hall"
        [expanded]="stepper.step === 0">


        <!-- emitted for brevity -->

        <button mat-raised-button
            type="button"
            color="primary"
            (click)="stepper.nextStep()">Next</button>
    </app-step>
    <app-step name="Video"
        [expanded]="stepper.step === 1">

        <!-- emitted for brevity -->

        </form>
    </app-step>
</app-stepper>

当我按下按钮进行下一步时，确实确实扩展了该“步骤”。但是，如果我单击任何标题，尽管我确实看到了控制台日志（因此实际上是事件发射器正在发射），但订阅未捕获，因此“步骤”未重置。

有人知道为什么我的代码：

this.children.forEach((child: StepComponent, i: number) => {
  this.subscriptions.add(
    child.animate.subscribe(() => {
      this.setStep(i);
    })
  );
});

没有被抓住吗？

Answer 1

我创建了一个stackblitz，因为这似乎是一个有趣的问题。