时间戳

首页 > 解决方案 > 如何检测垂直导航组何时展开/折叠

vmware-clarity - 如何检测垂直导航组何时展开/折叠

问题描述

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

person-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>

person-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()永远不会触发任何其他代码。

标签： vmware-clarity

解决方案

@Output您可以在clr-vertical-nav-group子组件上使用现有的： 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>

推荐阅读