使用 Angular 7，当 Bootstrap Collapse 展开时如何调用函数？答案

【问题标题】：Using Angular 7, how do I call a function when Bootstrap Collapse expands?使用 Angular 7，当 Bootstrap Collapse 展开时如何调用函数？
【发布时间】：2019-10-19 21:15:51
【问题描述】：

我正在使用 Angular 7 构建一个 Hacker 新闻克隆，我想要实现的是当用户单击评论旁边的按钮时，他们将看到子 cmets。

我添加了 Bootstrap 4 Collapse，我想做的是在折叠展开时调用一个传递所需注释 id 的函数，因此一旦面板展开，它就会显示子 cmets。

我知道 Collapse 有几个我可以使用的事件，这个 answer 显示了一个示例，但我不知道将其添加到我的组件中。

这是我到目前为止所尝试的，我想调用的函数是 getCommentDetails 并将子 cmets id 传递给它。

cmets.component.html

<router-outlet></router-outlet>
<div class="container">  
  <div class="row" *ngFor="let comment of commentDetails let i = index">
    <!-- only display the expand button if there are child comments -->
    <p *ngIf="comment.kids?.length > 0">
      <a class="btn btn-primary" 
         data-toggle="collapse" 
         href="#collapseExample_{{i}}" 
         role="button" 
         aria-expanded="false" 
         aria-controls="collapseExample"
         (click)="getCommentDetails(comment.kids)">
      </a>
    </p>    
    <p [innerHTML]="comment.text"></p>
    <div class="collapse" id="collapseExample_{{i}}">
      <div class="card card-body">
        <p [innerHTML]="comment.text"></p>
      </div>
    </div>
  </div>
</div>

cmets.component.ts

import { Component, OnInit } from '@angular/core';
import { CommentsTransferService } from '../services/comments-transfer.service';
import { HackerNewsService } from '../services/hackernews.service';

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

  commentIDs: number[];
  commentDetails: any[];

  constructor(private commentsTransferService: CommentsTransferService,
              private hackerNewsService: HackerNewsService) { }

  ngOnInit() {
    this.getCommentDetails(this.commentsTransferService.getCommentIDs());
    this.hackerNewsService.getCommentTree(this.commentsTransferService.getCommentIDs()).subscribe(
      data => {
        console.log('comment tree is ', data );
        Object.assign(this, data);            
      },
      error => console.log(error)
    );

  }

  getCommentDetails(commentIds: number[]) {
    this.commentDetails = this.hackerNewsService.getComments(commentIds);
    console.log(this.commentDetails);
  }
}

【问题讨论】：

标签： angular bootstrap-4

【解决方案1】：

如果你使用 Angular 和 Bootstrap，你可能应该切换到 NgBootstrap。它具有 Bootstrap 的所有优点，但直接与 Angular 一起使用。

这是您使用的文档： https://ng-bootstrap.github.io/#/components/collapse/examples

这是外观的基本信息。

<div class="container">  
  <div class="row" *ngFor="let comment of commentDetails let i = index">
    <!-- only display the expand button if there are child comments -->
    <p *ngIf="comment.kids?.length > 0">
      <a class="btn btn-primary" 
         [attr.aria-expanded]="!isCollapsed" 
         aria-controls="collapseExample"
         (click)="getCommentDetails(comment.kids); isCollapsed = !isCollapsed">
      </a>
    </p>    
    <p>{{comment.text}}</p>
    <div id="collapseExample_{{i}}" [ngbCollapse]="isCollapsed">
      <div class="card card-body">
        <p>{{comment.text}}</p>
      </div>
    </div>
  </div>
</div>

【讨论】：