Angular 角度清晰度为datagrid创建子组件

我正在使用Clarity的datagrid，并希望构建更小的组件，以便遵循以下结构：

网格 标题 项目 页脚 这是我的网格组件模板：

如果我去掉了专用的哑组件并内联所有内容，网格看起来就像预期的那样：

城市 首都 人口 国 {{city.name} {{城市.首都} {{城市.人口} {{city.country.name} {{cities$| async.length}cities 我找不到任何东西来解决这种问题

我试图将应用程序网格标题模板更改为[app grid header]，并将其用作指令，但这并没有解决问题

我还尝试将封装更改为其他可能的选项，但没有一个产生影响

---

要使其按预期工作，我必须进行哪些更改？

当您插入自己的组件（这些组件不是典型的datagrid组件）时，问题就会出现，显示内容的选择器并不总是正常工作。这是Angular通常工作方式的一个限制，将其视为不匹配的CSS选择器。这与封装模式无关，因为它只影响角组件中声明的CSS，而Clarity不使用它

但是，您可以在一定程度上使用clr dg行类型数据执行此操作。请参阅此演示：

一般来说，最好不要将datagrid分解成更小的组件，尤其是在本例中，如果不通过添加更多组件将其分解，则会产生更多的代码。这是过度优化，在许多情况下会导致更多的开销。如果您有一个需要重用的datagrid，那么将整个datagrid包装成一个组件

---

编辑：从Clarity 1.0开始，这可能不起作用，不建议尝试在datagrid中包装行。出现了许多冲突，换行没有多大好处。

虽然在Clarity 0.13.x及以下版本中有效，但在Clarity 1中不再有效，将来可能也不起作用。