Angular 9: использовать компонент как директиву

Недавно я читал источник небулярной, угловой структуры пользовательского интерфейса, у меня есть вопросы о следующем коде:

@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, почему? Я ничего не нашел об этом в угловом документе.


person Winson Li    schedule 09.07.2020    source источник


Ответы (2)


Все компоненты являются директивами, но не все директивы являются компонентами. то есть компонент представляет собой директиву с шаблоном. как определено в документах angular

при этом основная причина, по которой вы можете использовать nbMenuItem в качестве атрибута элемента DOM, связана с селектором для NbMenuItemComponent.

помещая скобки вокруг селектора, который информирует Angular о том, как его можно использовать. в этом случае [nbMenuItem] означает, что это можно использовать как атрибут элемента DOM и как таковую директиву.

person Edward    schedule 09.07.2020
comment
Угадал ответ! - person Tucker; 09.07.2020

В angular 9 селектор атрибутов унаследован от декоратора Directive. См. компонент Angular.

person Peter Huang    schedule 09.07.2020