Question

Bonjour

我认为这个问题已经被问了一百万遍了，但是我在Google上找不到我的问题的答案。

我从API数据的父组件中获取。

我想将这些数据发送到子组件。我认为是@Input（）？但我不知道如何在儿童级别上称呼它。

这是父组件：

export class MlsComponent extends BaseComponent implements OnInit {

  // Réaliser côté back la fonction pour les biens en baisse de prix
  public newCurrentLeases: any[];
  public newLeases: any[];
  public newReservedGoods: any[];
  public goodsHired: any[];
  public archivedLeasedGoods: any[];
  public cheaperGoodsRented: any[];
  public newGoodsInProgress: any[];
  public newCompromise: any[];
  public newVacancy: any[];
  public goodsSolds: any[];
  public archivedGoodsSold: any[];
  public cheaperGoodsSold: any[];
  public saleRentalInProgress: any[];
  public newLeaseCompromises: any[];
  public newOffersBookings: any[];
  public newSoldLeased: any[];
  public withdreawnGoods: any[];
  public cheaperGoodsSoldRented: any[];

  public tabNumber = 0;

  constructor(private dataMlsService: DataMlsService) {
    super();
  }

  ngOnInit() {
    this.unsubscribeOnDestroy(
      this.dataMlsService.getProducts().subscribe((data: any) => {
        this.newCurrentLeases = data['newCurrentLeases'];
        this.newLeases = data['newLeases'];
        this.newReservedGoods = data['newReservedGoods'];
        this.goodsHired = data['goodsHired'];
        this.archivedLeasedGoods = data['archivedLeasedGoods'];
        this.cheaperGoodsRented = data['cheaperGoodsRented'];
        this.newGoodsInProgress = data['newGoodsInProgress'];
        this.newCompromise = data['newCompromise'];
        this.newVacancy = data['newVacancy'];
        this.goodsSolds = data['goodsSolds'];
        this.archivedGoodsSold = data['archivedGoodsSold'];
        this.cheaperGoodsSold = data['cheaperGoodsSold'];
        this.saleRentalInProgress = data['saleRentalInProgress'];
        this.newLeaseCompromises = data['newLeaseCompromises'];
        this.newOffersBookings = data['newOffersBookings'];
        this.newSoldLeased = data['newSoldLeased'];
        this.withdreawnGoods = data['withdreawnGoods'];
        this.cheaperGoodsSoldRented = data['cheaperGoodsSoldRented'];
      })
    );
  }

这是父组件：

<div class="wrapper-mls">
   <div class="wrapper-header">
      <app-header (tabEvent)="changeTab($event)"></app-header>
   </div>
   <div class="wrapper-filter">
      <app-filter-bar></app-filter-bar>
   </div>
   <app-vente-location *ngIf="tabNumber === 0"></app-vente-location>
   <app-vente *ngIf="tabNumber === 1"></app-vente>
   <app-location *ngIf="tabNumber === 2"></app-location>
</div>
<router-outlet></router-outlet>

以下是子组件：

export class LocationComponent implements OnInit {

  // Statut des counter.component
  statusBienLoue = "Les biens en statut Loués";
  statusReservation = "Nouvelle Réservation";
  statusArchive = "Les biens en statut Archivés";
  // Status des graphic.component
  statusChangementPrix = "Changement de prix";
  statutNouveauBien = "Nouveau Bien";
  statusNouveauBaux = "Nouveau Baux";

  constructor() {}

  ngOnInit() {
  }

这是子html组件：

<div class="row-page">
  <div class="container-graphic">
    <app-graphic [statusGraphic]="statusChangementPrix" [statusCounter]="statusBienLoue"></app-graphic>
  </div>
</div>
<div class="row-page">
  <div class="container-graphic">
    <app-graphic [statusGraphic]="statutNouveauBien" [statusCounter]="statusReservation"></app-graphic>
  </div>
</div>
<div class="row-page">
  <div class="container-graphic">
    <app-graphic [statusGraphic]="statusNouveauBaux" [statusCounter]="statusArchive"></app-graphic>
  </div>
</div>

Answer 1

您只需将带有Input装饰器的属性添加到要接收数据的子组件中即可。

例如，如果您要将数据传递到app-location组件：

export class LocationComponent implements OnInit {
    @Input()
    data: any;

    ...
}

从父组件html中，您只需将数据传递给属性：

<app-location *ngIf="tabNumber === 2" [data]="newCurrentLeases"></app-location>

将API数据从父级传递到子级

1 个答案: