将文本从一个组件传递到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

Answer 2

如果要发送选定的电影类型而不是传递“ MovieType”，则传递“ selectedType”作为输入参数。请检查选定的值是否为空。

<ng-container *ngIf='selectedType'>
    <movie-report [type]='selectedType' *ngIf="showMovieReport"></movie-report>
</ng-container>

在电影报告组件中

export class MovieReportComponent {
  @Input('type') type: string;
}