Wie man eine Container-Komponente in Angular2 macht

Question

Ich lerne angle2, Was ich im Grunde versuche zu tun, ist eine Komponente zu erstellen, die (einige wie) andere Komponenten enthalten könnte.

Ich meine, ich möchte eine Komponente Card erstellen, die Inhalt haben könnte.

Dies ist ein Beispiel:

<Card> 
    <span>Some Content</span> 
</Card> 

ich viele Male wiederverwenden Karte zu wünschen kann, wie kann ich eine Komponente wie das schaffen?

Answer 1

Sie können die Anweisung <ng-content></ng-content> in der Vorlage Ihrer Komponente verwenden, um den Inhalt an dieser Stelle einzufügen.

Answer 2

Wenn Sie TypeScript verwenden (was eckular empfiehlt), können Sie eine Komponente mit einem definierten Selektor importieren, sie als Direktive hinzufügen und den Selektor im HTML der umgebenden Komponente verwenden.

cards.ts

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

@Component({ 
    selector: 'card', 
    template: '<span>Some Content</span>' 
}) 
export class CardComponent { 

} 

container.ts

import { Component }  from '@angular/core'; 
import { CardComponent } from './cards.ts'; 

@Component({ 
    directives: [CardComponent], 
    template: '<div><card></card><card></card></div>' 
}) 
export class ContainerComponent { 
} 

: Dies kann wie folgt durchgeführt werden