使用ngComponentOutlet创建动态组件的依赖注入问题

Question

该项目需要使用ngComponentOutlet指令动态创建组件。 动态组件将通过将数据注入到构造函数中来接收数据。 那么，如何在构造函数中将此数据作为参数传递呢？

我创建了一个示例，链接为https://angular-lqaeqp.stackblitz.io/load

项目结构为：

1. HomeComponent-起点

2. LoadComponents模块-延迟加载的模块，其中包含2个组件

   （i）LoadComponents-路线'/ load'的默认设置

   （ii）Component1Component-将由LoadComponents创建的动态组件

LoadComponents具有以下用于创建的代码：

<ng-container *ngComponentOutlet="component;injector: injectData;"></ng-container>

3. 内容模型-需要在Component1Component中注入的模型

如果我删除了注入代码，则该应用程序将运行，否则将显示错误：

Error: StaticInjectorError(AppModule)[Component1Component -> Content]

目前，我已经通过使用插件“ ng-dynamic-component”解决了项目问题，该插件的工作原理很吸引人。 但是我必须应用Angular的ngComponentOutlet指令。

Answer 1

您正在向组件中注入Content ，因此它应该是可注入的：

@Injectable({
  providedIn: 'root',
})
export class Content {
    @Input() public Code: string;
    @Input() public HTML: string;
}

您固定的StackBlitz

PS。 始终在您的问题中包含令人烦恼的代码！

Answer 2

服务和组件在Angular中的用途不同

服务是一个广泛的类别，涵盖了应用程序需要的任何价值，功能或功能。 服务通常是具有狭窄，明确定义目的的类。 它应该做特定的事情并且做得很好。

Angular将组件与服务区分开来，以提高模块化和可重用性。 通过将组件的与视图相关的功能与其他类型的处理分开，可以使组件类更加精简和高效。

由于您在content.module.ts中使用Injectable装饰器，因此不应使用@Input装饰器。 然后不要用新的关键字初始化对象。 使用new关键字实例化对象用于创建不可注入的对象。 参考： Angular2-调用Constructor（）与new关键字创建对象？

content.model.ts

import { Injectable } from '@angular/core';    
@Injectable({
  providedIn: 'root',
})
export class Content {
   Code: string ;
   HTML: string;
}

示例： https ： //stackblitz.com/edit/angular-favvmz