Angular 角度9:将组件用作指令
最近我正在阅读nebular的源代码,这是一个有角度的ui框架,我对以下代码有疑问:Angular 角度9:将组件用作指令,angular,angular9,angular10,Angular,Angular9,Angular10,最近我正在阅读nebular的源代码,这是一个有角度的ui框架,我对以下代码有疑问: @Component({ selector: '[nbMenuItem]', templateUrl: './menu-item.component.html', animations: [ ... ], }) export class NbMenuItemComponent implements DoCheck, AfterViewInit, OnDestroy { @Input(
@Component({
selector: '[nbMenuItem]',
templateUrl: './menu-item.component.html',
animations: [
...
],
})
export class NbMenuItemComponent implements DoCheck, AfterViewInit, OnDestroy {
@Input() menuItem = <NbMenuItem>null;
@Output() hoverItem = new EventEmitter<any>();
@Output() toggleSubMenu = new EventEmitter<any>();
@Output() selectItem = new EventEmitter<any>();
@Output() itemClick = new EventEmitter<any>();
这应该是一个组件,下面是它的使用方法:
@Component({
selector: 'nb-menu',
styleUrls: ['./menu.component.scss'],
template: `
<ul class="menu-items">
<ng-container *ngFor="let item of items">
<li nbMenuItem *ngIf="!item.hidden"
[menuItem]="item"
[class.menu-group]="item.group"
(hoverItem)="onHoverItem($event)"
(toggleSubMenu)="onToggleSubMenu($event)"
(selectItem)="onSelectItem($event)"
(itemClick)="onItemClick($event)"
class="menu-item">
</li>
</ng-container>
</ul>
`,
})
export class NbMenuComponent implements OnInit, AfterViewInit, OnDestroy {
...
}
我的问题是,为什么nbMenuItem可以用作指令,它由@Component注释,为什么?我在angular文档中没有找到任何与此相关的内容。所有组件都是指令,但并非所有指令都是组件。i、 e.组件是带有模板的指令。如 也就是说,可以将nbMenuItem用作DOM元素的属性的主要原因是NbMenuItemComponent的选择器
通过在选择器周围放置括号,通知Angular如何使用它。在本例中,[nbMenuItem]表示它可以用作DOM元素的属性,也可以用作指令。所有组件都是指令,但并非所有指令都是组件。i、 e.组件是带有模板的指令。如 也就是说,可以将nbMenuItem用作DOM元素的属性的主要原因是NbMenuItemComponent的选择器
通过在选择器周围放置括号,通知Angular如何使用它。在这种情况下,[nbMenuItem]意味着它可以用作DOM元素的属性,也可以用作指令。在angular 9中,属性选择器从指令decorator继承。
参见angular 9中的,属性选择器继承自指令装饰器。
见确定了答案!找到答案了!