我尝试为导航菜单创建自定义 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 类。
如何定义组件是否嵌套到自身?
最佳答案
你可以通过>>>
:host >>> nav-menu-item
应该允许你给 child 设置样式
关于javascript - 如何定义组件是否嵌套在 Angular 6 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53771238/