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;
}

在Ionic 3和Angular 4中重复使用离子成分

1 个答案: