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，並在關閉下拉列表時將其刪除。

我希望這個答案足夠清楚。