https://github.com/wszgrcy/dynamic-component-define

https://github.com/wszgrcy/dynamic-component-define

angular dynamic dynamic-component dynamic-directive

Last synced: 7 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/wszgrcy/dynamic-component-define
• Owner: wszgrcy
• Created: 2025-02-28T00:48:55.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2025-02-28T12:41:43.000Z (about 1 year ago)
• Last Synced: 2025-07-25T03:36:45.390Z (9 months ago)
• Topics: angular, dynamic, dynamic-component, dynamic-directive
• Language: TypeScript
• Homepage:
• Size: 140 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 动态组件定义(组件动态连接桥)

## 这个库做什么的?

- 它可以在动态创建组件时(`createComponent`),额外添加指令

- 它允许手动指定投影选择器投影到指定位置

- 它可以动态创建 html 元素并挂载指令

## 它是如何实现的?

- 使用未公开的公开 API,手动模拟 ng 组件编译,实现一个最小的组件

# run demo

- npm i

- npm start

# use

- npm i @cyia/dynamic-component-define

```ts

import { createDynamicComponentDefine } from "@cyia/dynamic-component-define";

export class AppComponent {

  envInjector = inject(EnvironmentInjector);

  continerRef = viewChild("continerRef", {

    read: ViewContainerRef,

  });

  classInput = signal({ inputValue2: "hello" });

  ngOnInit(): void {

    let define = createDynamicComponentDefine({ type: C1Component }, [

      {

        type: ClassDirective,

        inputs: this.classInput,

      },

      {

        type: ClickDirective,

        outputs: {

          clientEvent: (event: any) => {

            console.log("click", event);

          },

        },

      },

    ]);

    let ref = createComponent(define, {

      environmentInjector: this.envInjector,

    });

    this.continerRef()!.createEmbeddedView(ref.instance.templateRef());

  }

  changeClass() {

    this.classInput.update((item) => {

      return { ...item, inputValue2: "changedClass" };

    });

  }

}

```