无法获取css以应用于Angular Component

Question

我已经坚持了一段时间。

我创建了一个名为app-place-icon-avatar的Angular组件。

我希望app-place-icon-avatar可以是55px的高度，也可以是div的高度的100％。

我尝试了很多东西。

请参阅屏幕截图，了解我所引用的内容。

当我检查它时，html元素显示17px高，但55px的css似乎正确应用。

我已经尝试应用:: host / deep /，:: host，将样式直接应用于父组件的html中的place-icon-avatar。

我检查时似乎正在应用css。 它说右边的高度为100％，但无论我做什么，实际的app-place-icon-avatar都是17px。

我是棱角分明的新手，如果我遗漏了一些基本的东西，我很抱歉，但我已经搜索了一段时间，找不到任何有用的东西。

我想让这个组件达到一定高度的原因是它更容易居中。 由于app-place-icon-avatar中的图像是55px，但app-place-icon-avatar本身只有17px高，因此很难将其垂直居中。 我想尽量简单。

:host /deep/ {
  height: 50px;
}

我期待app-place-icon-avatar的高度为55px或100％。 无论我尝试什么，它都是17px。

Answer 1

Jojofoulk给了我答案，就是将displaymode改为flex或block。 这解决了这个问题。