Question

<app-card></app-card>

位于我的app.component.html中，并显示卡片组件

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

以上是我的卡

我想更改卡片标题（最终也是内容）而不会在我的app.component.html中出现卡片html代码的混乱。我似乎无法弄清楚如果我有多个字符串，我会将card.component.ts中的字符串传递给我的卡片。

卡片的标题应为{{title1}} 2.nd卡应该有标题{{title2}}

如何使用ngFor重复显示数组中字符串计数的卡数，从而将索引所在的字符串传递给卡片标题？

Answer 1

您可以使用名为card.component的组件：

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

最后使用它你只需要：

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

Answer 2

您可以使用Input component interaction在答案中提出 @SergioEscudero ，并使用您喜欢的索引将数据从父级传递到子组件。

更优化的解决方案是使用Transclusion创建具有动态内容的Card组件。这样，您就可以为每张卡片创建自己的自定义内容，这些内容都与CardComponent

具有相同的基础

当卡片有自己的组件

2 个答案: