Question

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

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()中的任何其他代码。

Answer 1

您可以在@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>

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

1 个答案: