angular - 将文本从一个组件传递到 Angular 中的另一个组件

Question

下面是我的landing-HTML页

<div class="container">

  <div>
    <mat-radio-group class="selected-type" [(ngModel)]="selectedType" (change)="radioChange()">
      <p class="question">Which movie report would you like to see ?</p>
      <mat-radio-button id="movie-a" class="Movie-type" [value]="MovieType.HORROR">Horror</mat-radio-button>
      <mat-radio-button id="movie-b" class="Movie-type" [value]="MovieType.ROMANTIC">Romantic</mat-radio-button>

    </mat-radio-group>
  </div>

    <movie-report *ngIf="showMovieReport"></movie-report>

</div>

这<movie-report>是一个不同的组件，有自己的 component.ts这使得 REST Call并给出一些数据。

我想通过 MovieType数据到MovieReport成分。怎么做？

Answer 1

您需要使用 @Input 来执行此操作，如下所示 -

<movie-report [type]='MovieType' *ngIf="showMovieReport"></movie-report>

为了在组件 movie-report 中获取它，您需要使用 @Input

export class MovieReportComponent {
  @Input('type') type: string;
  // You will get Input Data in ngOnInit life cycle hook of Angular component
}

更多细节引用这里-

• https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding