1

最近在看nebular的源码，一个angular ui框架，对下面的代码有疑问：

@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 文档中没有找到任何关于此的内容。

4

2 回答 2

4

所有组件都是指令，但并非所有指令都是组件。即组件是带有模板的指令。如角度文档中所定义

话虽如此，您可以将 nbMenuItem 用作 DOM 元素的属性的主要原因是因为NbMenuItemComponent.

通过在选择器周围放置方括号，告知 Angular 如何使用它。在这种情况下，这[nbMenuItem]意味着它可以用作 DOM 元素的属性，也可以用作指令。

于 2020-07-09T04:18:29.817 回答
0

在 Angular 9 中，属性选择器继承自 Directive 装饰器。请参阅角度组件

于 2020-07-09T04:21:48.687 回答