elementrefにコンポーネントを追加する方法は？

elementrefにコンポーネントを子として追加し、そのプロパティにアクセスしたい。

const element: HTMLElement = document.createElement('div');

element.innerHTML = // Component needs to be added here

// Need to have access to properties of the Component here

プロジェクトにフルカレンダーを追加しました。タイムラインでは、カスタムリソース要素を追加する必要があります。このため、HTMLElementと一部のデータにのみアクセスできます。だから私がしたいのは、初期化されたコンポーネントをHTMLElementに渡すことです。

現在、私の唯一のオプションは、HTMLを文字列として書き込み、それをinnerHTMLに渡すことです。より良いオプションはありますか？

私のプロジェクトの1つで、私はこの方法であなたの要求に似た何かを達成しました。それが役立つかどうか教えてください？

constructor(private componentFactoryResolver: ComponentFactoryResolver,
            private injector: Injector, 
            private appRef: ApplicationRef) {

  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent); // Your dynamic component will replace DynamicComponent

  const componentRef = componentFactory.create(this.injector);

  this.appRef.attachView(componentRef.hostView);  

  const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;

  const element: HTMLElement = document.createElement('div');
  element.appendChild(domElem); // Component needs to be added here
  document.body.appendChild(element);
}

このようにして、動的コンポーネントへの参照が componentRef

レンダラ2を使用できる可能性があります

export class AppComponent { 
@ViewChild('addButton') 
  private animateThis: ElementRef;  
  constructor(private renderer: Renderer2) {}

  addBtn() {
    const button = this.renderer.createElement('button'); 
    const buttonText = this.renderer.createText('This is a button');
    this.renderer.appendChild(button, buttonText);
    this.renderer.appendChild(this.animateThis.nativeElement, button);
  }
}

その他の例

Angularのドキュメントは言う

Angular要素は、カスタム要素としてパッケージ化されたAngularコンポーネントです（Webコンポーネントとも呼ばれます）。

したがって、次のコマンドを使用して、追加する要素を作成できます。

1. document.createElement('elementName')それがあれば自律カスタム要素、または
2. document.createElement('baseElementName', {is: 'elementName'})それがされている場合、内蔵要素にカスタマイズ。

ここで説明するように、作成したcontainer要素を要素に挿入できます。container.insertAdjacentElement(position, element)

import { AfterContentInit, Component, ElementRef } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
    <h1>My App</h1>
    <pre>
      <code>{{ node }}</code>
    </pre>
  `
})
export class AppComponent implements AfterContentInit {
  node: string;

  constructor(private elementRef: ElementRef) { }

  ngAfterContentInit() {
    const tmp = document.createElement('div');
    const el = this.elementRef.nativeElement.cloneNode(true);

    tmp.appendChild(el);
    this.node = tmp.innerHTML;
  }

}

コンポーネントがwindow.customElementsに登録されていることを考える
と、Angularのドキュメントによると、おそらく
そうです。

var element = document.createElement("div");

var comp= document.createElement("your-component")
/*
optionally set component attributes or anything else
you also have access to the component's properties here
comp.setAttribute("name",value)
console.log(comp.exampleProperty)
*/
element.appendChild(comp)

あなたが達成しようとしていることは不可能であり、ベストプラクティスに反しています。代わりに、そのコンポーネントを条件付きで示す必要があります。稼働中に変数を作成し、その値に基づいてコンポーネントを表示またはループすることができます。