Angular5.2 added components with ngComponentOutlet without bind ngif? how to deal with it?


Code
parent component
html:
< ng-container * ngComponentOutlet= "switchComponent" > < / ng-container >
ts:
public switchComponent = null;
constructor () {

this.switchComponent = PatientRecordComponent;

}
subcomponents
< div * ngif= "false" > ssss < / div >

clipboard.png
try to solve
parent component
html:
< ng-container * ngComponentOutlet= "switchComponent; ngModuleFactory: myModule;" > < / ng-container >
ts:
import {NgModuleFactory, Compiler} from"@ angular/core";
import {PatientRecord} from". / common/patient/record/record.module";
public switchComponent = null;
myModule: NgModuleFactory ;
constructor (compiler: Compiler) {

this.myModule = compiler.compileModuleSync(PatientRecord);
this.switchComponent = PatientRecordComponent;

}

Mar.12,2021

you need to import CommonModule into the module corresponding to AppModule or your component

import { CommonModule } from '@angular/common';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

because * ngFor * ngIf these instructions are defined in CommonModule and exported for external use.

Menu