组件中的angular2材质网格平铺答案

【问题标题】：angular2 material grid tile in component组件中的angular2材质网格平铺
【发布时间】：2017-03-04 04:12:44
【问题描述】：

这就是我想要做的：

<md-grid-list cols="3">
    <product *ngFor="let product of products" [product]="product"></product>
</md-grid-list>

product 组件包含 md-grid-tile。

问题：
瓦片不可见（但它们在 DOM 中呈现）。如果我将 md-grid-tile 直接放在列表下方，效果很好，但我想保持代码干净并使用我自己的组件......

我有什么遗漏吗？也许我可以添加一些 CSS hack 来显示图块？

任何帮助将不胜感激，谢谢！

【问题讨论】：

你不能把product tag 放在md-grid-tile tag 里面吗？并在图块上循环，但继续将“产品”传递到您的产品组件中。
这是我首先做的，它有效，但我想在 ProductComponent 中处理整个磁贴上的点击事件
我明白你的意思。但是，在产品模板中的其余 html 周围放置一个 div 并在其上设置点击事件还不够吗？并在产品组件上设置height: 100%; width: 100%;（可能是您想在组件css中使用 :host 选择器）
是的...哈哈其实很简单，谢谢！我使用 :host 选择器将宽度/高度添加到产品标签

标签： angular angular-material2

【解决方案1】：

来自对问题的评论：

但是，在产品模板中的其余 html 周围放置一个 div 并在其上设置点击事件还不够吗？并设置高度：100%；宽度：100%；在产品组件上（可能是您想在组件 css 中使用 :host 选择器）

我就是这样解决的：

<md-grid-list cols="3">
    <md-grid-tile *ngFor="let product of products">
        <catalog-product [product]="product"></catalog-product>
    </md-grid-tile>
</md-grid-list>

在产品组件的scss中：

:host{
    width: 100%;
    height: 100%;
}

【讨论】：