Question

我的观察方式-具有组件选择器的ng-content标签与编写组件标签本身相同。例如，我正在执行一些任务的项目使用此代码：

<div class="sidebar-style"
             [ngClass]="{
                            'sidebar-hidden': !showSidebar
                        }">
            <ng-content select="car-sidebar"></ng-content>   <-------this
        </div>

我不明白，为什么要选择此代码呢？

<div class="sidebar-style"
             [ngClass]="{
                            'sidebar-hidden': !showSidebar
                        }">
            <car-sidebar></car-sidebar> <-----is the same as this
        </div>

是否有任何理由/用例应使用ng-content而不是component标签本身？

Answer 1

它们是两个不同的元素，使用component标签可以在其他父组件中渲染该组件。如果组件标签的HTML中没有<ng-content></ng-content>，则不能在组件标签之间放置任何文本

即 <car-sidebar>Some Test Here </car-sidebar>将不显示任何文本 <ng-content></ng-content>在其（car-sidebar.component.html）文件中

Answer 2

让我们说您有两个不同的组成部分

父母1：

<div class="sidebar-style"
    <ng-content select="car-sidebar"></ng-content>   <-------this
</div>

父母2：

<div class="sidebar-style"
    <car-sidebar></car-sidebar> <-----is the same as this
</div>

用法示例：

<Parent1>
    <p>some random unnecessary text</p>
    <car-sidebar aParameter=[aValue]></car-sidebar>
</Parent1>

将输出到

<Parent1>
    <p>some random unnecessary text</p>
    <car-sidebar aParameter=[aValue]></car-sidebar>
</Parent1>

但是

<Parent2>
    <p>some random unnecessary text</p>
    <car-sidebar aParameter=[aValue]></car-sidebar>
</Parent2>

将输出到

<Parent2>
    <car-sidebar></car-sidebar> <-----is the same as this
</Parent2>

是否存在在组件标签上通过组件选择器使用ng-content的用例？

2 个答案: