Javascript 如何定义组件是否嵌套到角度6中的自身？

我尝试为导航菜单创建自定义角度组件。此菜单可以嵌套，因此它是二级菜单。下面是它的外观：

app.component.html

第一节
第二节
第2.1小节
第2.2小节
第2.3小节
第三节

我创建了两个组件

菜单.组件.ts

从'@angular/core'导入{Component，HostBinding}；
@组成部分({
选择器：“导航菜单”，
模板：“”，
样式URL:['./menu.component.css']
})
导出类菜单组件{
@主机绑定（“类”）类=“导航菜单”；
}

菜单项.component.ts

从'@angular/core'导入{Component，HostBinding}；
@组成部分({
选择器：“导航菜单项”，
模板：“”，
样式URL:['./菜单项.component.css']
})
导出类MenuItemComponent{
@主机绑定（'class'）类='nav菜单项'；
}

问题是子菜单必须有不同的样式。所以我必须区分菜单项是否嵌套（第二级）。我可以用这样的选择器

.nav item.nav item{}

在CSS中解决这个问题，但最好为第一级和第二级菜单项使用不同的CSS类

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

---

你可以用>>>

:host >>> nav-menu-item

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

---

我找到了带有依赖项注入参数的解决方案

@可选
和
@SkipSelf
。如果菜单在祖先菜单中具有相同的菜单，则此菜单是嵌套的。菜单项也一样

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

您可以添加@Input level（），您的组件是或谢谢您的回答，但是需要使用输入参数指定导航级别会使组件更加复杂。我找到了另一个解决方案。可能我错误地表述了一个问题，但嵌套菜单也应该有不同的行为，因此您的解决方案在这种情况下不起作用。我尝试过，但得到了循环依赖，很高兴了解SkipSelf。