Reuse ionische Komponenten in Ionic 3 und 4 Angular

Question

Ich habe diese ionische Liste

<ion-list> 
    <ion-item *ngFor="let friend of (friendsObs|async)"> 
    <h2>{{friend.name}}</h2> 
    </ion-item> 
</ion-list> 

Und ich mag den Ionen Artikel Teil als Komponente extrahieren, so dass ich es woanders wiederverwenden kann. Aber das Folgende funktioniert nicht so, wie ich es möchte.

@Component({ 
    selector: 'friend-item', 
    template: ' 
    <ion-item> 
     <h2>{{friend.name}}</h2> 
    </ion-item>' 
}) 
export class FriendItemComponent { 
    @Input() friend: Friend; 
} 

<ion-list> 
    <friend-item *ngFor="let friend of (friendsObs|async)" [friend]='friend'> 
</ion-list> 

Das war Arbeit, aber ich fand später heraus, der Inhalt eingewickelt wird, und das Layout ist nicht wie erwartet, wie folgt.

<ion-list> 
    <friend-item> 
    <ion-item> 
     <h2>Friend's Name</h2> 
    </ion-item>' 
    </friend-item> 
</ion-list> 

Was ist der richtige Weg?

Answer 1

Die Vorlage Zeichenfolge in Ihrem @Component Dekorator ist keine gültige Zeichenfolge. Wenn Sie dies als mehrzeilige Zeichenfolge ausführen möchten, sollten Sie die ES6-Vorlagenliterale verwenden (siehe template literals on MDN).

Das bedeutet, Sie verwenden zurück haben Zecken statt einfache oder doppelte Anführungszeichen:

@Component({ 
    selector: 'friend-item', 
    template: ` 
    <ion-item> 
     <h2>{{friend.name}}</h2> 
    </ion-item>` 
}) 
export class FriendItemComponent { 
    @Input() friend: Friend; 
}