Angular 2 ng-bootstrap 模态框

Question

我在应用程序中使用组件而不是模板打开模态框，然后需要将对象模型传递给模态框组件，问题是TypeScript会报modalRef.componentInstance不存在的错误，我完全复制了演示页面上的示例，但仍然出现相同的错误，并且无法在模态框内容类上填充@input变量。

这是错误信息： 无法设置未定义的属性“model”

 @Component({
selector: 'company-list',
templateUrl: './app/components/company/company-list.component.html'
})
export class CompanyListComponent implements {
private modalRes: Company;

constructor(private modalService: NgbModal) {
}

open(company: Company) {
    const modalRef = this.modalService.open(CompanyAddComponent);
    modalRef.componentInstance.name = 'some name';  //** this line gives error

    modalRef.result.then((result) => {           
    }, (reason) => {

    });     
}

createCompany(model: Company) {
    this.companyService.createCompany(model);
}
}

在模态框内，我声明了以下变量以获取传入的值 @Input() model: Company; 但它始终为null。

- Behnam Abdy

Answer 1

对于你的第一个问题，即componentInstance不存在，我首先会确保你正在使用1.0.0-alpha.9版本。当我使用1.0.0-alpha.8时，我也收到了同样的错误，升级后问题得到了解决。

一旦你使用了最新版本，你的第二个问题似乎是你没有引用正确的@Input()变量。所以我会做出以下更改。

// Original
...
modalRef.componentInstance.name = 'some name'; 
...

// Updated
...
modalRef.componentInstance.model = new Company();
...

在更新的部分中，请注意，它不再引用不存在的name变量，而是引用您的@Input()变量model。

- ForrestB

---

感谢您升级到1.0.0-alpha.9并重新安装节点包解决了问题。 - Behnam Abdy