跨元件操作Angular Material UI元件該如何操作

General
1

就是運用了stepper的元件

<mat-horizontal-stepper #stepper>
    <mat-step>
      <ng-template matStepLabel>A</ng-template>
    </mat-step>
    <mat-step>
      <ng-template matStepLabel>B</ng-template>
    </mat-step>
    <mat-step>
      <ng-template matStepLabel>C</ng-template>
      <button mat-raised-button (click)="stepper.reset()">回第一步重填</button>
    </mat-step>

</mat-horizontal-stepper>

在同一元件中(html和對應的ts檔)
設置的這個stepper.reset()方法是可行的

那如果要從外部或是其他元件來驅動
一直辦不到
知道這個也是靠丟property

有參考到這篇文獻
https://www.itread01.com/content/1544339826.html
但是會出現
ERROR Error: Uncaught (in promise): NullInjectorError:

然後外部元件這樣的寫法也會跳錯

<button mat-raised-button color="warn" (click)="backToStart()">回第一步重填
</button>

 @ViewChild('stepper', { static: false }) stepper: MatStepper;

/**
   * 跳轉到第一個tab的第一個step
   */
  backToStart() {
    this.AComponent.MatStepper.stepper.reset();
    return (this.tabComponent.tabIndex = 0);
  }

所以有點搞不太懂該怎樣呼叫

還是說這個case也是要丟service ?

想問說各位前輩平常都用怎樣的寫法
或是有怎樣的相關介紹
學習一下之後以後就能用這寫法來寫

再請各位大大回應了
感謝

2

外部完整的 html 不是長這樣吧，有完整的 code 嗎?

但先給你一個操作方式

這題真的沒有標準答案，因為都可以

1個讚