Angular 7 @ViewChild 错误无法读取未定义的属性（读取“下一个”）

Question

我有两个组件，我希望它们相互交互。 首先是一个模式，其中有一个按钮，单击该按钮后我想 go 到我的应用程序的下一步。 第二个组件是 angular 材料步进器。 单击弹出模式中的按钮后，如何使我的应用程序 go 进入下一步？

我一直在尝试使用 @ViewChild 来执行此操作，但是当我在我的模式中单击按钮时，我在浏览器控制台中收到此错误：

ERROR TypeError: Cannot read properties of undefined (reading 'next')
    at MyModalComponent.push../src/app/modals/my-modal/my-modal.component.ts.MyModalComponent.onLanguageSet

我的模态.component.ts：

import {Component, OnInit, Inject, ViewChild} from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-my-modal',
  templateUrl: './my-modal.component.html',
  styleUrls: ['./my-modal.component.scss']
})
export class MyModalComponent implements OnInit {
  
  constructor(
      public dialogRef: MatDialogRef<MyModalComponent>,
      @Inject(MAT_DIALOG_DATA) public data: any
  ) { }

  onLanguageSet() {
    this.dialogRef.close();
  }

  ngOnInit() {

  }

}

我的模态.component.html：

<div mat-dialog-actions fxLayoutAlign="end">
  <button mat-button mat-raised-button color="primary" (click)="onLanguageSet()">Begin configuration</button>
</div>

自定义 stepper.component.ts：

import { ChangeDetectorRef, Component, Input, QueryList } from '@angular/core';
import { CdkStep, CdkStepper } from '@angular/cdk/stepper';

@Component({
  selector: 'app-custom-stepper',
  templateUrl: './custom-stepper.component.html',
  styleUrls: ['./custom-stepper.component.scss'],
    providers: [{provide: CdkStepper, useExisting: CustomStepperComponent}],
})

export class CustomStepperComponent extends CdkStepper {


    onClick(index: number): void {
      this.selectedIndex = index;
    }
}

自定义步进器.component.html：

  <footer>
    <mat-toolbar>
      <h2>Step {{selectedIndex + 1}}/{{_steps.length}}</h2>
      <span class="fill-space"></span>
      <button [ngClass]="selectedIndex > 0 ? 'noBtn': ''" mat-raised-button color="primary" class="naslednji-korak" [disabled]="(selectedIndex + 1)>_steps.length" cdkStepperNext>Begin configuration</button>
      <button [ngClass]="selectedIndex == 0 ? 'noBtn': ''" mat-raised-button color="secondary" class="naslednji-korak" [disabled]="selectedIndex == 0" cdkStepperPrevious>Previous step</button>
      <button [ngClass]="selectedIndex == 0 ? 'noBtn': ''" mat-raised-button color="primary" class="naslednji-korak" [disabled]="(selectedIndex + 1)==_steps.length" cdkStepperNext>Next step</button>
      <button [ngClass]="(selectedIndex + 1)<_steps.length ? 'noBtn': ''" mat-raised-button color="primary" class="naslednji-korak" [disabled]="(selectedIndex + 1)<_steps.length" (click)="reset()">Submit order</button>
    </mat-toolbar>
  </footer>

我正在使用以下代码打开和关闭configurator.component.ts中的模态：

import { CustomStepperComponent } from '../custom-stepper/custom-stepper.component';        
@ViewChild('stepper') stepper: CustomStepperComponent;

    openDialog() {
            const dialogRef = this.dialog.open( MyModalComponent, {
                disableClose: true,
            });
    
            dialogRef.afterClosed().subscribe(result => {
                this.stepper.next();
                console.log('Zapri modal');
            });
        }

Answer 1

您似乎在my-modal.component.html中缺少一个模板变量（在您的例子中#stepper ）。

并且由于您正在使用该元素的next()方法，我假设该元素必须是材料步进器类型，否则，您会看到next is not a function错误！