重用離子成分的離子3和4角

Question

我有這個名單離子

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

我要離子項目的一部分提取物作爲一個組成部分，所以我可以在其他地方重複使用它。但是，下面的內容不符合我的需要。

@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> 

這是工作，但後來我發現內容被包裹在和佈局並不如預期，像以下。

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

什麼是正確的做法呢？

Answer 1

您的@Component修飾符中的模板字符串不是有效的字符串。如果您想將其作爲多行字符串來執行，則應使用ES6模板文字（請參閱template literals on MDN）。

這意味着你必須使用回蜱，而不是單或雙引號：

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