Angular 7 on off click close bootstrap折叠

Question

我有一个侧边菜单，其中列出了带有其他可折叠链接的链接

link
link
  ----link
  ----link
link
  ----link

在单击侧面菜单后，我希望所有“打开”的可折叠div关闭。

<ul class="list-unstyled components">
        <li>
            <a href="#TypographySubmenu" data-toggle="collapse" aria-expanded="false">
                <fa-icon [icon]="['far', 'font']" class="mr-2"></fa-icon>
                Typography
            </a>
            <ul class="collapse list-unstyled" id="TypographySubmenu">
                <li>
                    <a routerLink="/fontFamilies" routerLinkActive="active">Font Families</a>
                </li>
                <li>
                    <a routerLink="/headers" routerLinkActive="active">Headers</a>
                </li>
                <li>
                    <a routerLink="/fontSizes" routerLinkActive="active">Font Sizes</a>
                </li>
                <li>
                    <a routerLink="/fontColors" routerLinkActive="active">Font Colors</a>
                </li>
            </ul>
        </li>
....



@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.less']
})
export class SidebarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

我在网上尝试了一些其他建议，但似乎没有任何效果。我不需要任何疯狂的复杂操作，而只是简单的操作，即当用户单击关闭所有可折叠菜单时，可以防止长时间滚动页面。