[英]angular 2 and above: directive name starting with *
This is bootstrap code for the drop-down. 这是下拉菜单的引导代码 。 Could anyone tell what is *dropdownMenu
? 谁能告诉我*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>
We also have following code in bs-dropdown-menu.directive.ts
: 我们在bs-dropdown-menu.directive.ts
也有以下代码:
@Directive({
selector: '[bsDropdownMenu],[dropdownMenu]',
exportAs: 'bs-dropdown-menu'
})
Could anyone one tell the relationship between selector
, exportAt
and the above *dropdownMenu
? 谁能告诉selector
, exportAt
和上面的*dropdownMenu
之间的关系吗?
Why are we defining selector this way(ie string selector contains two arrays) and exporting and using it different way? 为什么我们以这种方式定义选择器(即,字符串选择器包含两个数组)并以不同的方式导出和使用它?
According to https://angular.io/guide/structural-directives every directive marked with * is structural directive. 根据https://angular.io/guide/structural-directives,每个带有*的指令都是结构指令。
Structural directives are responsible for HTML layout. 结构指令负责HTML布局。 They shape or reshape the DOM's structure, typically by adding, removing, or manupulating elements. 它们通常通过添加,删除或操纵元素来成形或重塑DOM的结构。
Meaning just like *ngIf , it would add/remove the element from the DOM and not just hide it. 含义与* ngIf一样,它将从DOM中添加/删除元素,而不仅仅是将其隐藏。 So in this case the *dropdownMenu will not create the ul until the dropdown is opened, and will remove it when it's closed. 因此,在这种情况下,* dropdownMenu不会在下拉列表打开之前创建ul,并在关闭下拉列表时将其删除。
I hope this answer was clear enough. 我希望这个答案足够清楚。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.