如果在AngularJS中没有提供翻译插槽，如何不提供翻译插槽？

Question

我有一个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>

问题

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

在ngIf上使用<h2>似乎是一种自然的方法，但我不知道如何编写一个只有在提供了翻译参数时才会成立的条件。 / p>

Answer 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>