如何设置ng-bootstrap模态框组件的内容成员？（Angular5+TypeScript）

作为Angular 5和TypeScript新手，我明白刚开始接触动态组件传值会有点困惑，别担心，咱们一步步来实现你要的功能：

步骤1：创建你的模态框内容组件 #

首先，你需要定义一个作为模态框内容的组件，并且通过@Input()装饰器声明你要接收的name属性，这样外部才能给它传值。同时，我们需要注入NgbActiveModal来处理模态框的关闭/销毁逻辑：

import { Component, Input } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Hi, {{ name }}!</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('关闭')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>这是为你定制的模态框，传入的名字是：{{ name }}</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-secondary" (click)="activeModal.close('确认关闭')">关闭</button>
    </div>
  `
})
export class CustomModalContentComponent {
  // 用@Input()标记这个属性，允许外部组件给它赋值
  @Input() name: string;

  constructor(public activeModal: NgbActiveModal) {}
}

步骤2：在父组件中调用模态框并设置属性 #

接下来，在你要触发模态框的父组件里，注入NgbModal服务，调用open()方法传入你的内容组件，然后通过componentInstance直接访问并设置内容组件的name属性：

import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { CustomModalContentComponent } from './custom-modal-content.component';

@Component({
  selector: 'app-parent-component',
  template: `
    <button class="btn btn-primary" (click)="openCustomModal()">打开带名字的模态框</button>
  `
})
export class ParentComponent {
  constructor(private modalService: NgbModal) {}

  openCustomModal() {
    // 打开模态框，传入内容组件
    const modalRef = this.modalService.open(CustomModalContentComponent);
    // 直接给内容组件的name属性赋值
    modalRef.componentInstance.name = 'S. Beliadsi';
  }
}

步骤3：在模块中注册组件（关键！） #

因为Angular 5中动态创建的组件（比如模态框的内容组件）需要显式注册到模块的entryComponents数组里，否则Angular无法提前编译它。所以在你的根模块（比如AppModule）里要这样配置：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';
import { ParentComponent } from './parent.component';
import { CustomModalContentComponent } from './custom-modal-content.component';

@NgModule({
  imports: [
    BrowserModule,
    NgbModule.forRoot() // Angular 5中需要调用forRoot()初始化ng-bootstrap
  ],
  declarations: [
    AppComponent,
    ParentComponent,
    CustomModalContentComponent // 声明内容组件
  ],
  entryComponents: [
    CustomModalContentComponent // 动态组件必须加入这里！
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

关键知识点解释 #

• @Input()：Angular中父子组件传值的核心装饰器，标记这个属性可以从父组件接收数据。
• modalRef.componentInstance：当你用NgbModal.open()打开组件时，返回的ModalRef对象包含了对内容组件实例的引用，通过它可以直接访问组件的属性和方法。
• entryComponents：Angular 5及更早版本中，动态创建的组件必须注册到这里，Angular会提前编译这些组件；Angular 9+引入了Ivy编译器后，这个配置就不再需要了，但你用的是Angular 5，所以一定要加。

这样操作后，点击按钮打开模态框，就能看到你传入的name属性显示在模态框里啦！

内容的提问来源于stack exchange，提问作者S. Beliadsi