我正在使用ngComponentOutlet在循环内创建许多动态组件以创建选项卡界面，但是当使用表单呈现组件时，该表单似乎已被禁用。问题是由我的注射器引起的，如果我卸下注射器，它可以正常工作。我的代码如下：
仪表板HTML
<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],
});
}
...
}
为所有代码道歉，但有任何建议或想法以及我做错了什么。数据已成功传递到子组件，我可以在视图内部渲染注入的数据。
以前从未使用过喷油器，完全是新手。可能代表我一个简单的错误。