Angular：使用 ngComponentOutlet 渲染组件表单答案

【问题标题】：Angular: Rendering component form using ngComponentOutletAngular：使用 ngComponentOutlet 渲染组件表单
【发布时间】：2019-01-31 03:30:58
【问题描述】：

我在循环中使用 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],
        });
    }
    ...
}

感谢所有代码，但任何建议或想法以及我做错了什么都值得赞赏。数据已经成功传递给子组件，我可以在视图中渲染注入的数据了。

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

【问题讨论】：

你能在 stackblitz.com 上复制它吗？

标签： angular

【解决方案1】：

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

【讨论】：