显示参数传递的组件

Question

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

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

知道如何解决这个问题吗？

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>