当 AngularJS 中没有提供嵌入槽时，如何不渲染它？答案

【问题标题】：How to not render transclusion slot when it's not provided in AngularJS?当 AngularJS 中没有提供嵌入槽时，如何不渲染它？
【发布时间】：2018-02-03 13:50:57
【问题描述】：

我有一个 AngularJS 组件，它使用带有 2 个嵌入槽的嵌入。其中之一 (messageHeading) 是可选的，有时根本不会提供。代码如下：

message.js

import template from "./messsage.html";

angular.component('message', {
    transclude: {
        heading: '?messageHeading',
        content: 'messageContent'
    },
    template
});

message.html

<aside class="message">
    <h2 class="message__heading"
        ng-transclude="heading"></h2>
    <p class="message__paragraph"
       ng-transclude="content"></p>
</aside>

问题

如果没有提供messageHeading，我怎么能根本不渲染<h2> 元素？在当前的默认行为中，它只呈现空内容，但我希望它永远不会出现在 DOM 中。

在<h2> 上使用ngIf 似乎是一种自然的方法，但我不知道如何编写一个只有在提供了嵌入参数时才为真的条件。

【问题讨论】：

标签： javascript angularjs angularjs-directive angularjs-components

【解决方案1】：

我自己解决了。有$transclude 服务，它提供方法isSlotFilled(nameOfTheSlot) 来检查槽是否已被填满。您可以将其用作ngIf 条件的值，因此仅在插槽已填满时才呈现<h2>。

message.js

import template from "./messsage.html";


class MessageController {
    constructor($transclude) {
        this.hasHeading = $transclude.isSlotFilled('heading');
    }
}


angular.component('message', {
    transclude: {
        heading: '?messageHeading',
        content: 'messageContent'
    },
    controller: MessageController,
    template
});

message.html

<aside class="message">
    <h2 class="message__heading"
        ng-if="$ctrl.hasHeading"
        ng-transclude="heading"></h2>
    <p class="message__paragraph"
       ng-transclude="content"></p>
</aside>

【讨论】：