如何定义组件是否在Angular 6中嵌套到自身？

Question

I try to create custom Angular component for navigation menu. This menu can be nested, so it is 2nd level menu. Here is how it looks:

app.component.html

<nav-menu>
  <nav-menu-item>Section 1</nav-menu-item>
  <nav-menu-item>Section 2
    <nav-menu>
      <nav-menu-item>Subsection 2.1</nav-menu-item>
      <nav-menu-item>Subsection 2.2</nav-menu-item>
      <nav-menu-item>Subsection 2.3</nav-menu-item>
    </nav-menu>
  </nav-menu-item>
  <nav-menu-item>Section 3</nav-menu-item>    
</nav-menu>

I have created two components.

menu.component.ts

import { Component, HostBinding } from '@angular/core';

@Component({
  selector: 'nav-menu',
  template: '<ng-content select="nav-menu-item"></ng-content>',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent {
  @HostBinding('class') class = 'nav-menu';
}

menu-item.component.ts

import { Component, HostBinding } from '@angular/core';

@Component({
  selector: 'nav-menu-item',
  template: '<ng-content></ng-content>',
  styleUrls: ['./menu-item.component.css']
})
export class MenuItemComponent {
  @HostBinding('class') class = 'nav-menu-item';
}

The problem is that the sub-menu must have different styles. So I have to differ if menu item is nested (2nd level) or not. I can fix this problem in CSS with such selector .nav-item .nav-item {} , but it would be better to have different CSS classes for 1st and 2nd level of menu item.

How to define if component nested to itself?

Example on StackBlitz

Answer 1

You can piece through with >>>

:host >>> nav-menu-item

Should allow you to style the child

https://stackblitz.com/edit/angular-nested-nav-menu-3v4iat

Answer 2

I found the solution with dependency injection parameters @Optional and @SkipSelf . If the menu has the same menu among the ancestors, then this menu is nested. Same for menu items.

constructor(@Optional() @SkipSelf() parentMenu: MenuComponent) {
  if (parentMenu) {
    this.class = 'nav-submenu';
  }
}

Updated Example