变化MD-卡冠军时，卡都有自己的分量

<app-card></app-card>

是我app.component.html和显示卡组件的上方变化MD-卡冠军时，卡都有自己的分量

<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卡应该有标题{{标题2}}

如何使用ngFor重复的显示的计卡的数量数组中的字符串，并因此将索引所在的字符串传递到卡片标题中？

来源

2017-08-29 Ty Yiu

所以基本上，你想有一个不同的标题和内容重复相同的卡？ –

可以呼吁card.component一个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>

来源

2017-08-29 16:27:13 SergioEscudero

是啊，这实际上看起来像它应该工作，但我得到一个奇怪的错误说：未捕获的错误：意外值“CardComponent”被模块的AppModule“声明。请添加@ Pipe/@ Directive/@组件注释。 –

好得到它的工作...我只是愚蠢 –

好吧，它为你工作？ – SergioEscudero

你可以这样做@SergioEscudero在他的回答提出的，使用Input component interaction，并使用像你一样的索引将父数据传递给子组件。

更加理想的解决方案将是使用Transclusion以及创建具有动态内容的卡组件。通过这种方式，你可以为每个卡自己的自定义内容，这都将有相同的基本为CardComponent

来源

2017-08-29 16:34:14

变化MD-卡冠军时，卡都有自己的分量

回答

相关问题