javascript - 如何定义组件是否嵌套在 Angular 6 中？

Question

我尝试为导航菜单创建自定义 Angular 组件。这个菜单可以嵌套，所以是二级菜单。这是它的样子:

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>

我创建了两个组件。

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';
}

菜单项.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';
}

问题是子菜单必须有不同的风格。所以我必须区分菜单项是否嵌套(第二级)。我可以使用这样的选择器 .nav-item .nav-item {} 在 CSS 中解决这个问题，但是最好为第一级和第二级菜单项设置不同的 CSS 类。

如何定义组件是否嵌套到自身？

Example on StackBlitz

Answer 1

你可以通过>>>

:host >>> nav-menu-item

应该允许你给 child 设置样式

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