선택기와 다른 HTML 태그로 Angular 구성 요소를 만드는 방법 🏷

일반적으로 Angular 구성 요소의 HTML 태그는 선택기입니다. 그러나 다른 호스트 HTML 요소를 사용하여 구성 요소를 생성할 수 있습니다. 구성 요소를 정적으로(HTML 템플릿에서) 생성하려는 경우 @Component 데코레이터에 정의된 속성selector을 사용할 수 있습니다. 또는 Angular API(예: createComponent() 또는 ComponentFactory.create() )를 통해 구성 요소를 동적으로 생성하려는 경우 사용자 지정 호스트 DOM 요소를 매개 변수로 전달할 수 있습니다.

정적으로 구성 요소 만들기

TLDR: stackblitz: creating a component statically with a custom HTML tag을 참조하십시오.

"요소 선택기"대신 "속성selector"을 사용하여 구성 요소를 정의합니다.

@Component({ 
  // Note the brakets around `my-component`, denoting an "attribute selector" instead of "element selector"
  selector: '[my-component]' 
  /* ... */
})
export class MyComponent { /* ... */ }

그런 다음 속성으로 참조하여 사용자 지정 HTML 태그로 이 구성 요소를 생성합니다.

<article my-component></article>

구성 요소를 동적으로 생성

TLDR: stackblitz: creating a component dynamically with a custom HTML tag을 참조하십시오.

여기서 선택자는 중요하지 않습니다. 정상일 수도 있습니다.

@Component({ 
  selector: 'my-component' 
  /* ... */
})
export class MyComponent { /* ... */ }

그런 다음 기존 DOM 요소를 동적으로 구성요소를 생성하기 위한 함수의 호스트로 전달합니다(예: createComponent() 에서 @angular/core 로):

@Component(/*...*/)
export class ParentComponent {
  constructor(
    protected injector: Injector,
    protected environmentInjector: EnvironmentInjector,
    protected viewContainerRef: ViewContainerRef
  ) {}

  ngOnInit() {
    // create a fresh element, detached from DOM
    const hostElement = document.createElement('article');

    // create MyComponent, passing the `hostElement` param
    const component = createComponent(MyComponent, {
      hostElement, // <-----------------------------------
      environmentInjector: this.environmentInjector,
      elementInjector: this.injector,
    });

    // insert this component into the `ViewContainerRef` of the parent component
    this.viewContainerRef.insert(component.hostView);
  }

참고: The function createComponent() 은 Angular 14.2에만 추가되었습니다(CHANGELOG 참조). 동일한 기능을 ComponentFactory에서도 사용할 수 있습니다(작성 ​​당시에는 deprecated).
ComponentFactory와 유사한 사용 예를 참조하십시오.

constructor(
    protected injector: Injector,
    protected componentFactoryResolver: ComponentFactoryResolver,
    protected viewContainerRef: ViewContainerRef
  ) {}

  ngOnInit() {
    // create a fresh element, detached from DOM
    const hostElement = document.createElement('article');

    const componentFactory =
      this.componentFactoryResolver.resolveComponentFactory(HelloComponent);
    // create MyComponent, passing the `hostElement` param
    const component = componentFactory.create(
      this.injector,
      undefined,
      hostElement // <-----------------------------------
    );
    this.viewContainerRef.insert(component.hostView);
  }

여기에서 working example on stackblitz using ComponentFactory 도 찾을 수 있습니다.