Question

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

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

项目结构为：

HomeComponent-起点
LoadComponents模块-具有2个组件的延迟加载模块

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

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

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

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

内容模型-需要在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装饰器，因此不应使用 @输入装饰器。然后不要用新的关键字初始化对象。使用new关键字实例化对象用于创建不可注入的对象。参考：Angular2 - calling constructor() vs new keyword to create an object?

content.model.ts

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

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

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

2 个答案: