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

【问题标题】：How to define if component nested to itself in Angular 6?如何在Angular 6中定义组件是否嵌套在自身？
【发布时间】：2019-05-15 05:22:02
【问题描述】：

我尝试为导航菜单创建自定义 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';
}

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

问题是子菜单必须有不同的样式。因此，如果菜单项是嵌套的（第二级），我必须有所不同。我可以使用这样的选择器.nav-item .nav-item {} 在 CSS 中解决这个问题，但最好为第一级和第二级菜单项设置不同的 CSS 类。

如果组件嵌套到自身，如何定义？

Example on StackBlitz

【问题讨论】：

你可以添加一个@Input level() 并且你的组件是或
感谢您的回答，但是需要使用输入参数指定导航级别使得组件更加复杂。我找到了另一个解决方案。

标签： javascript html css angular

【解决方案1】：

你可以通过>>>

:host >>> nav-menu-item

应该允许您为孩子设置样式

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

【讨论】：

也许我错误地提出了一个问题，但嵌套菜单也应该有不同的行为，所以你的解决方案不适用于这种情况。

【解决方案2】：

我找到了使用依赖注入参数@Optional 和@SkipSelf 的解决方案。如果菜单在祖先中具有相同的菜单，则该菜单是嵌套的。菜单项也一样。

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

Updated Example

【讨论】：

我试过了，但得到了循环依赖，很高兴了解 SkipSelf。