Änderung md-card-Titel von app.component.html, wenn die Karte eine eigene Komponente

Question

<app-card></app-card> 

in meinem app.component.html ist und zeigt die Karte Komponente

<md-card class="card" style="box-shadow: none;"> 
<md-card-header> 
    <md-card-title style="font-size:x-large;"> 
    </md-card-title> 

</md-card-header> 

<md-card-content> 

    <p class="flow-text"> 
    {{placeholder}} </p> 
</md-card-content> 
<md-card-actions> 
    <button md-button>LIKE</button> 
    <button md-button>SHARE</button> 
</md-card-actions> 

oben hat, ist Meine Karte

Ich möchte den Kartentitel (letztlich auch den Inhalt) ändern, ohne das Durcheinander der Karte HTML-Code in meiner app.component.html. Ich kann nicht herausfinden, wie ich eine Zeichenfolge von meiner card.component.ts in meine Karten übergebe, wenn ich mehr als eine Zeichenfolge habe.

1. Karte sollte Titel haben {{}} title1 2.ten Karte sollte Titel haben {{}} title2

Wie verwende ich ngFor die Anzahl der Karten auf die Anzahl der angezeigten zu wiederholen die Zeichenfolgen in einem Array und übergeben Sie daher die Zeichenfolge, bei der der Index in den Kartentitel ist?

Answer 1

Sie können eine Komponente genannt haben card.component mit:

import { Component } from '@angular/core'; 
@Component({  
    selector: 'my-card', 
    template:` 
     <md-card class="card" style="box-shadow: none;"> 
     <md-card-header> 
      <md-card-title style="font-size:x-large;"> 
      {{title}} 
      </md-card-title> 
     </md-card-header>  
     <md-card-content> 
     <p class="flow-text"> 
      {{placeholder}} </p> 
     </md-card-content> 
     <md-card-actions> 
     <button md-button>LIKE</button> 
     <button md-button>SHARE</button> 
     </md-card-actions> 
` 

}) 

export class CardComponent{ 
    @Input() placeholder: string; 
    @Input() title: string; 
} 

Und schließlich, es zu benutzen Sie müssen nur:

<my-card [title] = "title" [placeholder] = "placeholder"></my-card> 

Answer 2

Sie können wie tun @SergioEscudero in seiner Antwort vorgeschlagen Verwenden Sie eine Input component interaction, und übergeben Sie Daten von Ihrem Elternteil an Ihre untergeordneten Komponenten mit Indizes wie Sie zu.

Eine optimalere Lösung wäre es, auch Transclusion zu verwenden, um eine Kartenkomponente mit dynamischem Inhalt zu erstellen. Auf diese Weise können Sie Ihre eigenen benutzerdefinierten Inhalte für jede Karte erstellen, die alle die gleiche Basis haben wie CardComponent