Angular 2+ 次 bootstrap 模态通过 Html
Angular 2+ ng-bootstrap modal pass Html
好的,我的模态设置如下。
请记住,我在组件库中工作,而不仅仅是应用程序。
在我的组件库中...
我有我的模板
<div class="modal-header">
<h4 class="mt-3">
{{header}}
</h4>
<button id="messageModalClose" type="button" class="close" aria-
label="Close"
(click)="closeModal()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{message}}
</div>
和组件
import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
import { NgbModal, NgbModalOptions, NgbActiveModal } from '@ng-bootstrap/ng-
bootstrap';
@Component({
selector: 'ms-modal',
templateUrl: './ms-modal.component.html',
styleUrls: ['./ms-modal.component.scss'],
//encapsulation: ViewEncapsulation.None,
})
export class MsModalComponent implements OnInit {
@Input() header: string;
@Input() message:string;
private _modalOptions: NgbModalOptions = {
backdrop: 'static',
keyboard: false,
size: 'lg',
centered: true
};
constructor(public activeModal: NgbActiveModal) { }
ngOnInit() {
}
closeModal() {
this.activeModal.close();
}
}
我将我的组件导入我的应用程序模块
从 'ms-components';
导入 {msModalModule}
我将 'msModalModule' 添加到 @NgModule 导入数组并添加组件
被模块引用到 entryComponents
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
HttpClientModule,
FormsModule,
msModalModule
],
bootstrap: [AppComponent],
entryComponents:[MsModalComponent]
})
export class AppModule {}
现在在我的 app.component.ts 我添加了一个函数来处理打开 Modal 并传入输入值
OpenModal(header,message){
***NgbModalOptions is optional
const modalOptions: NgbModalOptions = {
backdrop: 'static',
keyboard: false,
size: 'lg',
centered: true,
};
const modalRef = this.modalService.open(MsModalComponent,modalOptions)
modalRef.componentInstance.header = header;
modalRef.componentInstance.message = message;
}
所以我不想只传递字符串值 pass/display HTML 和 refModal 中的控件以使其更有用...我听说过 "transclusion"这但只找到 AngularJS 个示例...这是对的吗?还有其他想法吗?
如果您只想让 body 部分成为 html。您可以使用 <ng-content></ng-content>
<div class="modal-header">
<h4 class="mt-3">
{{header}}
</h4>
<button id="messageModalClose" type="button" class="close" aria-
label="Close"
(click)="closeModal()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ng-content></ng-content>
</div>
模态组件的使用
<ms-modal><h1> This is modal content area </h1></ms-modal>
您似乎无法将表单控件传递给 ng-bootstrap 模态。
不过我确实更改了我的 "modal-body" 以便可以传递文本或 HTML。
这只会解释 html 样式标签,如(粗体)作为示例......它不会解释控制标签,如或
使用 "innerHTML" 这就是它的样子。
<div class="modal-header">
<h4 class="mt-3">{{header}}
</h4>
<button id="messageModalClose" type="button" class="close" aria-label="Close" (click)="closeModal()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" [innerHTML]=message>
</div>
好的,我的模态设置如下。 请记住,我在组件库中工作,而不仅仅是应用程序。
在我的组件库中...
我有我的模板
<div class="modal-header">
<h4 class="mt-3">
{{header}}
</h4>
<button id="messageModalClose" type="button" class="close" aria-
label="Close"
(click)="closeModal()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{message}}
</div>
和组件
import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
import { NgbModal, NgbModalOptions, NgbActiveModal } from '@ng-bootstrap/ng-
bootstrap';
@Component({
selector: 'ms-modal',
templateUrl: './ms-modal.component.html',
styleUrls: ['./ms-modal.component.scss'],
//encapsulation: ViewEncapsulation.None,
})
export class MsModalComponent implements OnInit {
@Input() header: string;
@Input() message:string;
private _modalOptions: NgbModalOptions = {
backdrop: 'static',
keyboard: false,
size: 'lg',
centered: true
};
constructor(public activeModal: NgbActiveModal) { }
ngOnInit() {
}
closeModal() {
this.activeModal.close();
}
}
我将我的组件导入我的应用程序模块 从 'ms-components';
导入 {msModalModule}我将 'msModalModule' 添加到 @NgModule 导入数组并添加组件 被模块引用到 entryComponents
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
HttpClientModule,
FormsModule,
msModalModule
],
bootstrap: [AppComponent],
entryComponents:[MsModalComponent]
})
export class AppModule {}
现在在我的 app.component.ts 我添加了一个函数来处理打开 Modal 并传入输入值
OpenModal(header,message){
***NgbModalOptions is optional
const modalOptions: NgbModalOptions = {
backdrop: 'static',
keyboard: false,
size: 'lg',
centered: true,
};
const modalRef = this.modalService.open(MsModalComponent,modalOptions)
modalRef.componentInstance.header = header;
modalRef.componentInstance.message = message;
}
所以我不想只传递字符串值 pass/display HTML 和 refModal 中的控件以使其更有用...我听说过 "transclusion"这但只找到 AngularJS 个示例...这是对的吗?还有其他想法吗?
如果您只想让 body 部分成为 html。您可以使用 <ng-content></ng-content>
<div class="modal-header">
<h4 class="mt-3">
{{header}}
</h4>
<button id="messageModalClose" type="button" class="close" aria-
label="Close"
(click)="closeModal()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ng-content></ng-content>
</div>
模态组件的使用
<ms-modal><h1> This is modal content area </h1></ms-modal>
您似乎无法将表单控件传递给 ng-bootstrap 模态。
不过我确实更改了我的 "modal-body" 以便可以传递文本或 HTML。 这只会解释 html 样式标签,如(粗体)作为示例......它不会解释控制标签,如或
使用 "innerHTML" 这就是它的样子。
<div class="modal-header">
<h4 class="mt-3">{{header}}
</h4>
<button id="messageModalClose" type="button" class="close" aria-label="Close" (click)="closeModal()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" [innerHTML]=message>
</div>