我有一个使用ng-bootstrap创建的模式组件，如下所示（只是主体）：
<template #content let-c="close" let-d="dismiss">
<div class="modal-body">
<p>Modal body</p>
</div>
</template>
它是角2分量
import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'my-hello-home-modal',
templateUrl: './hellohome.modal.html'
})
export class HelloHomeModalComponent {
closeResult: string;
constructor(private modal: NgbModal) {}
open(content) {
this.modal.open(content).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
console.log(reason);
});
}
}
我真的很希望能够从我的网站的其他组件中调用此模式。我只想从我的homeComponent调用open方法。
看到我的homeComponent
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-home',
templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
constructor() {
}
ngOnInit() {
console.log('Hello Home');
/** want call modal popin here from the init component method in order to test the modal. **/
}
}
有人可以解释我该怎么做？我来自angular 1.x，它非常简单...
这就是我使用Angular 5和ng-bootstrap的方法。创建模态组件，如下所示：
import { Component, OnInit } from '@angular/core';
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'sm-create-asset-modal',
templateUrl: './create-asset-modal.component.html',
styleUrls: ['./create-asset-modal.component.css']
})
export class CreateAssetModalComponent implements OnInit {
constructor(public activeModal: NgbActiveModal) { }
ngOnInit() {
}
}
模板将类似于：
<div class="modal-header">
<h4 class="modal-title">Create New </h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" (click)="activeModal.close('Close click')">Create</button>
</div>
在要从中打开模态的组件中，添加类型为NgbModal的变量，然后按以下方式调用open：
export class MyComponent {
constructor(private modal: NgbModal) {}
onClick() {
this.modal.open(CreateAssetModalComponent);
}
}
在声明了CreateAssetModalComponent的NgModule中，将组件添加到entryComponents数组中，如下所示：
@NgModule({
imports: [...],
declarations: [CreateAssetModalComponent],
entryComponents: [CreateAssetModalComponent]
})
假设您导入了其他模块（例如NgbModule），则此方法应该可以正常工作。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句