当卡片有自己的组件时，将 md-card-title 从 app.component.html 更改为

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

您可以像 @SergioEscudero 在他的回答中提出的那样，使用 Input component interaction，并使用像您这样的索引将数据从父组件传递到子组件.

更好的解决方案是同时使用 Transclusion 创建一个包含动态内容的 Card 组件。这样，您就可以为每张卡片创建自己的自定义内容，它们都将与 CardComponent

具有相同的基础

当卡片有自己的组件时，将 md-card-title 从 app.component.html 更改为

change md-card-title from app.component.html when card has its own component

interpolation

angular-material

angular-material2

angular