Используя Angular 7, как я могу вызвать функцию при расширении Bootstrap Collapse?

Question

Я создаю клон новостей Hacker, используя Angular 7, и я пытаюсь добиться этого, когда пользователь нажимает кнопку рядом с комментарием, чтобы увидеть комментарии ребенка.

Я добавил Bootstrap 4 Свернуть , и я хотел бы вызвать функцию, передающую требуемые идентификаторы комментариев, когда Свернуть развернуто, поэтому после расширения панели отображаются дочерние комментарии. ,

Мне известно, что в Collapse есть несколько событий, которые я могу использовать, и этот ответ показывает пример, но я не знаю, как добавить это в свой компонент.

Вот то, что я пытался сделать, и функция, которую я хочу вызвать, - это getCommentDetails и передать его идентификаторам дочерних комментариев.

comments.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>

comments.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);
  }
}

Answer 1

Если вы используете Angular с Bootstrap, вам, вероятно, следует переключиться на NgBootstrap. Это все добрая Bootstrap, но работает напрямую с угловым.

Вот документация для того, что вы используете: 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>