Question

这是下拉列表的bootstrap code。谁能说出*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，并且会在关闭时将其删除。

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

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

1 个答案: