组件中的 angular2 Material 网格瓦片

Question

这就是我想要做的:

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

product 组件包含一个 md-grid-tile。

问题:
这些图 block 是不可见的(但它们在 DOM 中呈现)。如果我将 md-grid-tile 直接放在列表下方，效果会很好，但我想保持代码整洁并使用我自己的组件...

有什么我想念的吗？也许我可以添加一些 CSS hack 来显示磁贴？

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

Answer 1

来自对问题的评论:

But isn't it enough to put a div around the rest of the html in your product template and have the click event set on it? And set height: 100%; width: 100%; on the product component (could be that you want to use the :host selector in your component css for that)

我是这样解决的:

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