角度:使用 ngComponentOutlet 渲染组件表单

Question

我在循环中使用ngComponentOutlet渲染许多动态组件以创建选项卡界面，但是当使用表单呈现组件时，该表单似乎被禁用。问题是由我的注射器引起的，如果我卸下注射器，它可以正常工作。我的代码如下：

仪表板网页

<mat-tab-group>
<mat-tab *ngFor="let tab of getTabService().tabs; let i = index" id="{{ i }}">
<ng-template mat-tab-label>
<span>{{tab.label}}</span>
</ng-template>
<ng-container *ngComponentOutlet="tab.component; injector: injectTab( tab )">          
</ng-container>
</mat-tab>
</mat-tab-group>

仪表板组件

...
import { Tab } from './../../models/tab.model'
const TAB = new InjectionToken<any>('tab');
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
tabInjector: Injector;
constructor(
private injector: Injector,
@Inject('tabService') private tabService
) {}
...
injectTab( tab ) {
const injector =
this.tabInjector = ReflectiveInjector.resolveAndCreate([{ provide: Tab, useValue: tab }], this.injector)
return this.tabInjector
}
}

具有注入的数据和表单显示为禁用的子组件

...
import { Tab } from './../../models/tab.model'
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
searchForm: FormGroup
constructor(
@Inject('orderService') private orderService,
@Inject('tabService') private tabService,
public tab: Tab,
private fb: FormBuilder
) {}
ngOnInit() {
this.createForm()
}
/**
* Create an instance of the form complete with validators
*/
createForm() : void {
this.searchForm = this.fb.group({
order_number: [null],
});
}
...
}

对所有代码表示歉意，但任何建议或想法以及我做错了什么，我们深表歉意。数据已成功传递到子组件，我可以在视图中呈现注入的数据。

以前从未使用过喷油器，完全新手。可能是我的一个简单错误。

Answer 1

此问题已作为问题提出，正在等待解决。详情见 https://github.com/angular/angular/issues/15360