如何检测垂直导航组何时为 expanded/collapsed

Question

我试图在打开组时使垂直导航折叠所有其他组（这是为了在组中有很多项目时限制菜单的大小）。

人-nav.component.html

<clr-vertical-nav-group (expandedChange)="doExpand()">
  {{this.personType || "People"}}
  <clr-vertical-nav-group-children>
    <a clrVerticalNavLink *ngFor="let person of people">
      {{person.name}}
    </a>
  </clr-vertical-nav-group-children>
</clr-vertical-nav-group>

人-nav.component.ts

@Component({
  selector: 'app-person-nav',
  templateUrl: './person-nav.component.html',
  styleUrls: ['./person-nav.component.css']
})
export class PersonNavComponent implements OnInit {
...
  doExpand() {
    console.warn('Test');
  }
}

但它从不记录任何内容，doExpand() 中的任何其他代码都不会被触发。

Answer 1

您可以在 clr-vertical-nav-group 子组件上使用现有的 @Output：clrVerticalNavGroupExpandedChange。这就是您的示例代码的样子：

<clr-vertical-nav-group (clrVerticalNavGroupExpandedChange)="doExpand($event)">
  {{this.personType || "People"}}
  <clr-vertical-nav-group-children>
    <a clrVerticalNavLink *ngFor="let person of people">
      {{person.name}}
    </a>
  </clr-vertical-nav-group-children>
</clr-vertical-nav-group>

如何检测垂直导航组何时为 expanded/collapsed

How to detect when vertical-nav-group is expanded/collapsed

vmware-clarity