javascript - AngularJS 中未提供时如何不渲染嵌入槽？

Question

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

消息.js

import template from "./messsage.html";

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

消息.html

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

问题

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

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

Answer 1

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

消息.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
});

消息.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>