Angular:隐藏父组件，但显示子组件

Question

在下面的示例中，是否有任何方法可以在页面上显示子组件，但隐藏外部组件？也许带有某种属性/样式？

<abc-component>
<def-component>
</def-component>
</abc-component>

Answer 1

从逻辑上讲，这是不可能的，但有另一种方法。

您可以将def-component的position样式设置为absolute或fixed。要隐藏abc-component，应将width和height设置为0。(当然还有填充和边距(。

Answer 2

没有办法做到这一点，这只是父组件和子组件关系如何工作的一部分。父组件包含子组件，因此如果隐藏它，也会隐藏其中的任何内容。

相反，你可以做的是用<ng-template>包裹它们，然后隐藏任何必要的东西，如下所示：

<ng-template>
<abc-component *ngIf="false">
</abc-component>
<def-component>
</def-component>
</ng-template>