2017-05-27 108 views
2

我想将数据绑定到Angular 4中的ng-container。 组件加载罚款,但是当我添加[componentData] =“测试”我得到错误Angular 4:ngComponentOutlet - 数据绑定

<ng-container *ngComponentOutlet="components.name" [componentData]="testing"> 
</ng-container> 

错误

Error: Template parse errors: 
Can't bind to 'componentData' since it isn't a known property of 'ng-container'. 
1. If 'componentData' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component. 
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("'Textarea' "> 
             <ng-container *ngComponentOutlet="widget.widgetComponent.component" [ERROR ->][componentData]="testing"> 
             </ng-container> 
          </div> 

难道你真的不能将数据绑定到ngComponentOutlet?

+0

你有' ng-container'用于'template'的情况。 '[componentData]'是一个自定义的@Input()'属性,它不可用作输入。 – Aravind

+0

看看https://stackoverflow.com/questions/44281288/reflectiveinjector-is-not-instantiating-component-correctly-with-ngcomponentoutl下面是一个替代方案https://stackoverflow.com/questions/42522633/angular- 4-assign-input-for-ngcomponentoutlet-dynamic-created-component – yurzui

回答

1

为了解决这个问题,你可以创建自定义组件

'custom-ng-container' 

@Input() componentName : any; 
@Input() componentData : any[]; 

HTML看起来像

<ng-container *ngComponentOutlet="componentName" > 

</ng-container> 

您应该使用在父组件作为

<custom-ng-container [componentName]="components.name" [componentData]="testing"> </custom-ng-container> 
+0

因此,您不能:( –

+0

yup。您有使用'* ngContainer'的局限性 – Aravind

+0

您是否可以更新您的应用程序以确保它是不可能 –