Передать данные Dynami c от родительского к дочернему компоненту в Angular 7 - PullRequest
Новая
       33

Передать данные Dynami c от родительского к дочернему компоненту в Angular 7

0 голосов
/ 11 февраля 2020

У меня есть этот код: 

<ion-item *ngFor="let product of products">
            <ion-label>
              {{ product }}
            </ion-label>
</ion-item>
<ng-container *ngSwitchCase="states.Product">
      <product-details></product-details>
</ng-container>

Я хочу передать дочернему компоненту product-details значение продукта из * ngFor родительского компонента. Должен ли я использовать вход или сервис? пожалуйста, приведите пример.

Ответы [ 3 ]

2 голосов
/ 11 февраля 2020

Просто используйте @Input декоратор для передачи данных от родительского к дочернему компоненту. Для привязки Dynami c вы можете использовать привязку атрибута [], как показано ниже - 

<ng-container *ngFor="let product of products">
   <ion-item>
       <ion-label>
          {{ product }}
       </ion-label>
      <ng-container *ngSwitchCase="states.Product">
          <product-details [productName]='product'></product-details>
      </ng-container>
   </ion-item>
</ng-container>

@Input('productName') productName: type

Также имейте в виду, что вы можете получить значение, переданное в хуке жизненного цикла ngOnInit, а не в Конструктор дочернего компонента.

Обратитесь к приведенному ниже рабочему примеру для ознакомления.

Рабочий пример

1 голос
/ 11 февраля 2020

Исходя из вашего кода, вы хотите получить доступ к переменной product вне области действия *ngFor. Я не могу рекомендовать это поведение, но, поскольку у вас есть обработчик событий в области действия, один из способов достижения этого - отправить значение в обработчик событий: 

<ng-container *ngFor="let product of products">
  <ion-item>
    <ion-label (mouseup)="mouseUp(product)">
      {{ product }}
    </ion-label>
    <ng-container *ngSwitchCase="states.Product">
      <product-details [productName]='product'></product-details>
    </ng-container>
  </ion-item>
</ng-container>
1 голос
/ 11 февраля 2020

Данные вашего продукта не находятся внутри *ngFor, вы можете передать product на <product-details>, только если он находится внутри области его действия. Я, конечно, рекомендую использовать здесь ввод, потому что он помогает сохранить ваш product-details компонент независимым и выполнять роль компонента только презентации Если вы используете службу, она будет зависеть от того, что служба должна откуда-то получать данные, что в этом случае сделает product-details слишком сложным. Вот пример: 

<ion-item *ngFor="let product of products">
  <ion-label>
    {{ product }}
  </ion-label>
  <div [ngSwitch]="state">
    <ng-container *ngSwitchCase="states.Product">
      <product-details [product]="product"></product-details>
    </ng-container>
  </div>
</ion-item>

И в вашем product-details.component.ts : 

@Input() product: Product;
...