2角以上：指令名称以*开头

Question

这是下拉菜单的引导代码 。 谁能告诉我*dropdownMenu什么？

源代码链接

<div class="btn-group" dropdown placement="bottom right">
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
    This dropdown's menu is right-aligned <span class="caret"></span>
  </button>
  <ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

我们在bs-dropdown-menu.directive.ts也有以下代码：

@Directive({
  selector: '[bsDropdownMenu],[dropdownMenu]',
  exportAs: 'bs-dropdown-menu'
})

谁能告诉selector ， exportAt和上面的*dropdownMenu之间的关系吗？

为什么我们以这种方式定义选择器（即，字符串选择器包含两个数组）并以不同的方式导出和使用它？

Answer 1

根据https://angular.io/guide/structural-directives，每个带有*的指令都是结构指令。

结构指令负责HTML布局。 它们通常通过添加，删除或操纵元素来成形或重塑DOM的结构。

含义与* ngIf一样，它将从DOM中添加/删除元素，而不仅仅是将其隐藏。 因此，在这种情况下，* dropdownMenu不会在下拉列表打开之前创建ul，并在关闭下拉列表时将其删除。

我希望这个答案足够清楚。