Angular 如何根据一个 class 的定义和数据,动态创建一个该类的实例

简介: Angular 如何根据一个 class 的定义和数据,动态创建一个该类的实例

可以从 SAP 电商云 Spartacus UI 的实现中找到一个例子。

    return this.resolveModuleFactory(moduleFunc).pipe(
      map(([moduleFactory]) => moduleFactory.create(parentInjector)),
      concatMap((moduleRef) => this.runModuleInitializersForModule(moduleRef)),
      tap((moduleRef) =>
        this.events.dispatch(
          createFrom(ModuleInitializedEvent, {
            feature,
            moduleRef,
          })
        )
      )
    );
  }

下图这段代码,createFrom 方法的输入参数 ModuleInitializedEvent,是我们在另一个 TypeScript 文件里定义的一个 class,而 feature 和 moduleRef,是实例数据:

image.png



createFrom 的实现:


image.png


/**
 * Creates an instance of the given class and fills its properties with the given data.
 *
 * @param type reference to the class
 * @param data object with properties to be copied to the class
 */
export function createFrom<T>(type: Type<T>, data: T): T {
  console.log('Jerry dynamically created new instance for type: ', type , ' with data: ' , data);
  return Object.assign(new type(), data);
}

这里传入的 class 定义,和传入的实例数据,必须严格匹配:



image.png

例如 ModuleInitializedEvent 的字段 feature 和 moduleRef,在我们传入 createFrom 函数的实例数据里是一一对应的。


相关文章
|
6月前
|
JavaScript 数据安全/隐私保护 开发者
Angular Component Class 成员属性默认的访问权限控制
Angular Component Class 成员属性默认的访问权限控制
65 0
|
4月前
快速创建Angular组件并定义传参、绑定自定义事件的方法
快速创建Angular组件并定义传参、绑定自定义事件的方法
|
6月前
|
存储 缓存
Angular Component Class 里的成员什么时候应该用 readonly 修饰
Angular Component Class 里的成员什么时候应该用 readonly 修饰
28 0
|
7月前
|
JavaScript 调度
Angular Ngrx Store 工具库里 Action 定义指南
Angular Ngrx Store 工具库里 Action 定义指南
34 0
angular定义数组的三种方式
angular定义数组的三种方式
454 0
|
存储 JavaScript 前端开发
Angular数据状态管理框架:NgRx/Store
ngrx/store 是基于RxJS的状态管理库,其灵感来源于Redux。在NgRx中,状态是由一个包含action和reducer的函数的映射组成的。Reducer函数经由action的分发以及当前或初始的状态而被调用,最后由reducer返回一个不可变的状态。
503 0
Angular数据状态管理框架:NgRx/Store
Angular tsconfig.json 文件里的 paths 用法和 scoped module 定义
Angular tsconfig.json 文件里的 paths 用法和 scoped module 定义
140 0
Angular tsconfig.json 文件里的 paths 用法和 scoped module 定义
|
JavaScript
Angular 如何根据一个 class 的定义和数据,动态创建一个该类的实例
Angular 如何根据一个 class 的定义和数据,动态创建一个该类的实例
185 0
Angular 如何根据一个 class 的定义和数据,动态创建一个该类的实例
|
容器
SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试
SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试
114 0
SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试
Angular 使用 Injector API 人工获取依赖注入的实例
Angular 使用 Injector API 人工获取依赖注入的实例
122 0
Angular 使用 Injector API 人工获取依赖注入的实例

热门文章

最新文章