通过Angular调用Bootstrap方法

Question

我需要通过Angular调用Collapsable上的隐藏方法。因此，我尝试通过ViewChild检索Element，并在Element.natuteElement.hide((上执行hide((方法。然而，它给了我一个错误，即尽管返回的元素是正确的(通过console.log检查(，但hide(

以下是代码片段：

模板：

<div *ngIf="consultation.status == 'open'">
<p>
<input type="button" [value]="editButtonText" class="btn btn-outline-secondary" data-bs-toggle="collapse" 
data-bs-target=".multi-collapse" aria-expanded="false" 
attr.aria-controls="waiterCommentBox{{ consultation.consultationId }} saveRequestButton{{ consultation.consultationId }}" 
(click)="toggleRequestEditMode()">
<input type="button" value="Save Changes" id="saveRequestButton{{ consultation.consultationId}}" 
class="btn btn-outline-success collapse multi-collapse collapse-horizontal" (click)="saveRequest()">
</p>

<div class="collapse multi-collapse" #waiterCommentBox id="waiterCommentBox{{ consultation.consultationId }}">
<div class="card card-body">
<textarea name="waiterComment" id="waiterComment" [(ngModel)]="consultation.waiterComment" cols="30" rows="5"></textarea>
</div>
</div>
</div>

组件代码：

import { Component, Input, ViewChild } from "@angular/core";
import { ConsultationRequest } from "../model/consultation-request";
import { ConsultationRequestsService } from "../services/consultation-requests.service";
@Component({
selector: 'consultation-state',
templateUrl: './consultation-state.component.html',
styleUrls: [ './consultation-state.component.scss' ]
})
export class ConsultationStateComponent {
@Input('counsultation') consultation = new ConsultationRequest();
@ViewChild('waiterCommentBox') waiterCommentBox: any;
editMode = false;
editButtonText = "Edit Request";

constructor(private consultationService: ConsultationRequestsService) {}
toggleRequestEditMode() {
this.editMode = !this.editMode;
this.editButtonText = this.editMode ? "Cancel Editing" : "Edit Request";
}
saveRequest() {
this.consultationService.updateConsultationRequest(
this.consultation.consultationId.toString(), { status: "closed", waiterComment: this.consultation.waiterComment } )
.subscribe(result => {
this.consultation.status = "closed";
this.waiterCommentBox.nativeElement.hide();
});
}
}

控制台中的错误消息：

错误类型错误：this.waiterCommentBox.nativeElement.hide不是函数在SafeSubscriber_next(咨询状态。组件。ts:31:66(在SafeSubscriber__tryOrUnsb(Subscriber.js:183:1(位于SafeSubscriber.ext(Subscriber.js:122:12(在订阅服务器上_next(Subscriber.js:72:1(位于Subscriber.ext(Subscriber.js:49:1(在MapSubscriber_next(map.js:35:1(位于MapSubscriber.ext(Subscriber.js:49:1(位于FilterSubscriber_next(filter.js:33:1(位于FilterSubscriber.ext(Subscriber.js:49:1(在MergeMapSubscriber.notifyNext(mergeMap.js:70:1(

我尝试通过document.getElementById检索元素，但这甚至不允许我编译TS代码(HTMLElement上不存在属性"hide"(。

引导程序版本：5.1.3-本地安装，包括JS

angluar.json

"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]

软件包.json

"ajv": "^6.12.6",
"bootstrap": "^5.1.3",
"rxjs": "~6.6.0",

角度12.2.15

Answer 1

(this.waiterCommentBox.nativeElement as any).hide();是快速而肮脏的解决方案，最好使用可折叠的类型，而不是"；任何"；，我只是不知道那种的名字

Answer 2

在导入下声明引导程序

declare const bootstrap: any;
@Component({ ... }) 

你需要获得折叠实例才能使用隐藏方法

@ViewChild('waiterCommentBox', { read: ElementRef }) waiterCommentBox: ElementRef<HTMLElement>;
const collapseInstance = bootstrap.Collapse.getInstance(this.waiterCommentBox.nativeElement);
if (collapseInstance) {
collapseInstance.hide();
}