Làm thế nào để thêm một thành phần vào một phần tử?

Tôi muốn thêm một thành phần vào phần tử ref khi còn nhỏ và có quyền truy cập vào các thuộc tính của nó.

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

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

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

Tôi đã thêm Lịch đầy đủ vào dự án của mình và đối với dòng thời gian tôi cần thêm các yếu tố tài nguyên tùy chỉnh. Đối với điều này, tôi chỉ có quyền truy cập vào HTMLEuity và một số dữ liệu. Vì vậy, những gì tôi muốn làm là chuyển một thành phần intialised cho HTMLEuity.

Ngay bây giờ tùy chọn duy nhất của tôi là viết html dưới dạng chuỗi và chuyển nó vào bên trongHTML. Có một lựa chọn tốt hơn?

Trong một trong những dự án của tôi, tôi đã đạt được một cái gì đó tương tự như yêu cầu của bạn theo cách này. Hãy cho tôi biết nếu nó giúp?

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);
}

Bằng cách này, bạn sẽ có tham chiếu đến thành phần động của bạn như componentRef

Bạn có thể sử dụng Renderer2

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);
  }
}

Thêm ví dụ

Tài liệu Angular nói

Các thành phần góc là các thành phần góc được đóng gói dưới dạng các thành phần tùy chỉnh (còn được gọi là Thành phần Web)

Vì vậy, bạn có thể tạo phần tử bạn muốn thêm bằng cách sử dụng

1. document.createElement('elementName')nếu nó là một yếu tố tùy chỉnh tự trị , hoặc
2. document.createElement('baseElementName', {is: 'elementName'})nếu nó là một phần tử tích hợp tùy chỉnh .

Bạn có thể chèn phần tử bạn đã tạo vào một containerphần tử bằng cách container.insertAdjacentElement(position, element)giải thích ở đây .

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;
  }

}

cho rằng thành phần được đăng ký trong window.customElements
và theo tài liệu Angular có lẽ,
bạn có thể làm:

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)

Những gì bạn đang cố gắng để đạt được là không thể và chống lại các thực tiễn tốt nhất. Thay vào đó bạn phải hiển thị thành phần đó với các điều kiện. Bạn có thể tạo biến trong dịch vụ và dựa trên giá trị đó, thành phần có thể được hiển thị hoặc lặp.