在 Typescript 中添加自定義 HTMLElement

Question

嗨，我是 angular 的新手，這對於有更多經驗的人來說似乎很明顯，但我正在嘗試在單擊按鈕時向頁面添加自定義 html 元素。 我無法弄清楚如何。

我的 html 和 ts 文件

TS文件：

@Component({
  selector: 'app-conter',
  templateUrl: './conter.component.html',
  styleUrls: ['./conter.component.css']
})
export class ConterComponent extends HTMLElement {
   _ref;
   constructor(id: string) {
    super();
    this.draggable = true;
    this.setAttribute('(drag)', 'drag($event)');
    this.setAttribute('id', id);
   }
   @Input()
  counterValue = 0 ;
   drag(ev) {
     ev.dataTransfer.setData('text/html', this);
   }
   protected validation() {
   }
  increment() {
    this.counterValue++;
  }
  decrement() {
    this.counterValue--;
  }
  setCounter(value) {
    this.counterValue = value;
      }
    }

HTML：

<div id="cont">
<button (click)="increment()">+</button>
{{counterValue}}
<button (click)="decrement()">-</button>
</div>

我添加元素的地方：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  constructor() {
  }
  ngOnInit() {}
  generate() {

                  <-- Method where i want to add my HTMELement to the page
  }

Answer 1

你可以通過下面的例子來做

generate(){
 const template = document.createElement('template');
 document.getElementsByTagName('body')[0].appendChild(template);
}

但我認為你需要在模塊中添加 CUSTOM_ELEMENTS_SCHEMA 看看這里如何將它添加到模塊中以避免錯誤。