如何避免 Angular 对子组件使用额外的标签？

Question

假设我在 Angular 12 中有父组件和子组件。例如，它们的模板如下所示：

家长：

<h1>This is parent component</h1>
<div class="container">
    <div class="row">
        <div class="col">Foo</div>
        <ng-container>
            <app-child-component></app-child-component>
        </ng-container>
    </div>
</div>

我必须使用ng-container

孩子：

<button>Click</button>

Angular 的作用是在子组件模板周围创建包装器，如下所示：

    <h1>This is parent component</h1>
    <div class="container">
        <div class="row">
            <div class="col">Foo</div>
            <app-child-component>
                <button>Click</button>
            </app-child-component>
        </div>
    </div>

我想要达到的理想效果是：

        <h1>This is parent component</h1>
        <div class="container">
            <div class="row">
                <div class="col">Foo</div>
                <button>Click</button>
            </div>
        </div>

我尝试使用属性选择器，即

<div app-child-component></div>

但这增加了我不想要的额外 div 元素。 属性选择器不能用于 ng-template 等

Answer 1

您可以使用

<ng-content></ng-content>

在子组件上喜欢：

<div>
   <ng-content></ng-content>
</div>

之后你可以尝试：

 <div class="container">
    <div class="row">
        <div class="col">Foo</div>
        <app-child-component>
            <button>Click</button>
        </app-child-component>
    </div>
</div>     

您也可以查看medium了解更多详情