我想在Angular中創建一個普通的ngx-bootstrap模態組件。
我在網上搜索了一下，并嘗試了這種方式。
我在網上搜索了一下。
import { Component } from '@angular/core'/span>。
import { BsModalService } from 'ngx-bootstrap/modal'/span>;
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class'/span>。
/* 這是我們打開模態組件的組件*/。
@Component（{
selector: 'my-component',
templateUrl: './service-component.html', templateUrl: '.
})
export class MyComponent {
bsModalRef: BsModalRef;
constructor（private modalService: BsModalService）{}。
public openModalWithComponent（）{
/* 這就是我們如何從另一個組件中打開一個模態組件 */。
this.bsModalRef = this。 modalService.show（ModalContentComponent）。
}
}
/* This is the Modal Component */.
@Component（{
selector: 'child-modal',
template: `
<div class="modal-header">
<h4 class="modal-title pull-left">標題</h4>。
<button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()" >
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" (click)="bsModalRef.hide()">關閉</button>
</div>
`
})
export class ChildModalComponent {
constructor(public bsModalRef: BsModalRef) {}。
}
< button type="button" class="btn btn-primary" （click）="openModalWithComponent（）">。 創建modal with component</button>
<child-modal #childModal > </child-modal>
但是它說'無法找到'ModalContentComponent'這個名字'。
而且我真的不明白他們是從哪里得到的，盡管它似乎對其他人有用。
uj5u.com熱心網友回復：
基本上，你創建了一個名為ModalContentComponent的新組件--只要使用CLI就可以了：
ng generate component /path/modal-content
然后像往常一樣，在你的.ts代碼中參考新創建的ModalContentComponent（例如你在問題中給出的代碼），然后就可以了！
。顯然，請確保你在你的模塊中以通常的方式宣告ModalContentComponent（如果你的設定正確，CLI應該為你處理）
可選擇的附加資訊：
為了使模態更加可重用，你可能希望模態內容組件中的HTML使用內容投影，這將涉及使用一個支持內容投影的額外組件。uj5u.com熱心網友回復：
請通過這個演示https://angular-ngx-bootstrap-alert-osq1c2.stackblitz.io和代碼https://stackblitz.com/edit/angular-ngx-bootstrap-alert-osq1c2?file=app/app.module.ts。 在這里你會發現你的錯誤（增加ModalContentComponent）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/307493.html
標籤：
上一篇：如何在點擊按鈕時呼叫一個函式？