Angular 4 verschachtelte Komponenten

Question

Ich hoffe, es geht Ihnen gut. Ich bin ziemlich neu in typeScript und eckigen 4 und ich habe mit einem Problem konfrontiert. Ich möchte eine Komponente in einer anderen Komponente verwenden. Die Daten sind über Http mit get-Methode zugänglich und kommen in Array von Objekt in der Elternkomponente und ich möchte ngFor verwenden, um untergeordnete Komponente basierend auf dem Empfangen von Daten von der übergeordneten Komponente zu wiederholen.

Code Es folgt Kind component.ts

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-card', 
    templateUrl: './app-card.component.html', 
    styleUrls: ['./app-card.component.css'] 
}) 
export class AppCardComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

hier ist mein Kind component.html

<mat-card class="pt-3"> 
    <mat-card-header class="text-truncate pb-2"> 
    <img mat-card-avatar src="http://material.angular.io/assets/img/examples/shiba1.jpg"> 
    <mat-card-title class="mt-2">{{pro.name}}</mat-card-title> 
    </mat-card-header> 
</mat-card> 

Eltern component.ts

import { Component, OnInit } from '@angular/core'; 
import { FeaturedService } from "../services/featured.service"; 


@Component({ 
    selector: 'app-collection', 
    templateUrl: './collection.component.html', 
    styleUrls: ['./collection.component.css'] 
}) 
export class CollectionComponent implements OnInit { 

    cc; 

    constructor(private featured: FeaturedService) { } 

    ngOnInit() { 
    this.featured.getAll().subscribe(results => { 
     this.cc= results 
    }); 

    } 

} 

und schließlich Mutter html

<div class="row"> 
      <div class="col-12 text-center pt-4 mb-4"> 
      <h3>Featured</h3> 
      <hr class="title-border" /> 
      </div> 
     </div> 
     <div class="row"> 
      <div *ngFor="let pro of cc" class="col-xl-6 p-md-1 p-lg-1 p-xl-2"> 
      <app-card></app-card> 
      </div> 
     </div> 

Ich schätze es, wenn Sie mir helfen können, dieses Problem zu lösen.

Answer 1

Sie müssen es als Eingabe

Und @input Attribut auf Ihr Kind Komponente

kann

Answer 2

Sie verwenden Einbindung verwenden zu übergeben.

Eltern html,

<div class="row"> 
      <div class="col-12 text-center pt-4 mb-4"> 
      <h3>Featured</h3> 
      <hr class="title-border" /> 
      </div> 
     </div> 
     <div class="row"> 
      <div *ngFor="let pro of cc" class="col-xl-6 p-md-1 p-lg-1 p-xl-2"> 
      <app-card>{{ pro.name }}</app-card> 
      </div> 
     </div> 

Kind html,

<mat-card class="pt-3"> 
    <mat-card-header class="text-truncate pb-2"> 
    <img mat-card-avatar src="http://material.angular.io/assets/img/examples/shiba1.jpg"> 
    <mat-card-title class="mt-2"> 
     <ng-content></ng-content> 
    </mat-card-title> 
    </mat-card-header> 
</mat-card> 

Oder Sie können mit Deklaration einer @Input Eigenschaft gehen, wie in anderen Antworten vorgeschlagen

Answer 3

Verwendung @Input die pro von der zu übergeben Elternteil zum Kind

in der Kind-Komponente:

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-card', 
    templateUrl: './app-card.component.html', 
    styleUrls: ['./app-card.component.css'] 
}) 
export class AppCardComponent implements OnInit { 

    @Input('pro') pro : any; 
    constructor() { } 

    ngOnInit() { 
    } 

in der übergeordneten Komponente:

<div class="row"> 
      <div class="col-12 text-center pt-4 mb-4"> 
      <h3>Featured</h3> 
      <hr class="title-border" /> 
      </div> 
     </div> 
     <div class="row"> 
      <div *ngFor="let pro of cc" class="col-xl-6 p-md-1 p-lg-1 p-xl-2"> 
      <app-card [pro]="pro" ></app-card> 
      </div> 
     </div>