Question

我对Angular还是很陌生，但我仍然不明白某些事情是如何工作的。
我正在尝试从angularJS模拟$ compile

是否可以将动态创建的组件注入到现有模块中？例如，将其注入AppModule，然后即时重新编译所有内容……或者，获取由其他模块（即AppModule）导入的模块列表

这就是我所拥有的：

@ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;
private comp: ComponentRef<any>;

private createComponentFromTemplate(template: string, modules: any = []) {
  let this_ = this;
  @Component({
    selector: 'some-tpl',
    template: template
  })
  class TmpComponent {
  }


  @NgModule({
    imports: modules, //here is the problem
    declarations: [
      TmpComponent
    ],
    exports: [
      TmpComponent
    ]
  })
  class TmpModule {
  }

  let mod = this.compiler.compileModuleAndAllComponentsSync(TmpModule);
  let factory = mod.componentFactories.find((c) => c.componentType === TmpComponent);
  this.comp = this.vc.createComponent(factory, 0, this.injector);
  //dynamic component is later destroyed
}

问题：
这样做完全可以，但是我要避免生成单独的模块。 “模板”字符串包含的HTML代码可以包含任何内容，如果我们在模板内部使用其他组件/指令，则可能会出现问题。通过引入“模块”可以解决该问题，“模块”是一个模块数组，其中应包含所有必需的模块，以便正确地编译新组件

我需要这个，以便启用动态数据处理：
数据通过REST服务从数据库中获取
根据获取数据的数据类型和服务，执行不同的处理（例如，将电子邮件转换为工作电子邮件链接，在表格中显示对象列表等）

预先感谢

Answer 1

所以我的思考过程是有两种方法可以做到。我将放弃您的操作方式，而是有条件地验证自定义组件中的数据。一种方法是使用事件发射器，并通过组件传递数据：

使用动态组件的页面

<dynamic-component [settings]="{ type: 'customType', params: { number: 1 } }"></dynamic-component>

动态组件

@Component({
  selector: 'dynamic-component',
  templateUrl: './dynamic-component.html',
  styleUrls: ['./dynamic-component.style.scss'],
})
export class DynamicComponent implements OnInit {
  @Input()
  settings: any

constructor() {     
  if (this.settings.type === 'customType') {
     // Handle conditional data
    }
  }

另一种方法是处理服务之间的数据。

服务

@Injectable()
export class SharedService {
sharedData: BehaviorSubject<any> = new BehaviorSubject<any>(null)
  constructor() {}
}

要从（任意）页面传递数据，请将服务注入到构造函数中，然后在行为主题上调用.next。

constructor(private sharedService: SharedService) {
  sharedService.sharedData.next({ type: 'customType', otherParam: 'foo' })
}

然后订阅数据，并进行相应的验证

动态组件

@AutoUnsubscribe()
@Component({
  selector: 'dynamic-component',
  templateUrl: './dynamic-component.html',
  styleUrls: ['./dynamic-component.style.scss'],
})
export class DynamicComponent implements OnInit, OnDestroy {

// Subscriptions
sharedSub$: Subscription
constructor(private sharedService: SharedService) {     
  this.sharedSub$ = sharedService.sharedData.subscribe((data) => {
if (data.type === 'customType') {
   // Now you have the conditional data
}
  })

 ngOnDestroy() {}
}

@AutoUnsubscribe只是我的一个建议，用于处理内存并防止泄漏。

Angular 7-将新的动态组件插入现有模块

1 个答案: