显示按参数传递的组件

Question

我想创建一个组件，该组件接收另一个组件作为参数，将其包装在 NgBootstrap 模式中，但添加一些 html 元素。

我不知道这是否可能，我想这样做的主要原因是将页眉和页脚添加到具有相同功能(如关闭按钮、接受和取消(的模态中，唯一改变的是正文，它应该显示作为参数传递的组件。

我知道如何解决这个问题的任何想法？

Answer 1

您应该使用<ng-content>下面的示例是一个模态通用模板，其中modalTitle是一个参数

.html

<!-- modal header -->
<div class="modal-header">
<h4 class="modal-title">{{modalTitle}}</h4>
<button type="button" class="close" aria-label="Close" (click)="closeModal()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<!-- modal body -->
<div class="modal-body">
<ng-content></ng-content>
</div>
<!-- modal footer -->
<div class="modal-footer"></div>
</div>
</div>

控制器

@Component({
selector: 'app-modal',
templateUrl: './modal.component.html',
styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit {
@Input() modalTitle: string;
constructor(private activeModal: NgbActiveModal) {
}
ngOnInit() {
}
closeModal() {
this.activeModal.close();
}
}

因此，当您想动态使用模态时，您应该将上面的代码包装在一个组件中并像这样"扩展它">

<app-modal modalTitle="this is my title">
<!-- start of dynamic content-->
<div>
<h2>This is my dynamic content</h2>
<p>I'am extending modal template...</p>
</div>
<!-- end of dynamic content -->
<app-modal>