如何使用Javascript生成外部库提供的角度组件？

我正在做一个角度项目，我正在使用一个外部组件库（NGPrime：），它为我提供了一些内置组件，例如

（我使用它来代替普通的

）

现在，我想在用户每次触发事件时创建一个新的

。我只是试了一下

var button = document.createElement('p-button')
document.getElementById("button-list").appendChild(button)

及

document.getElementById（“按钮列表”）.innerHTML+=“单击我！”

但当然什么都不管用

如何动态生成新的

尝试使用innerHtml

this.htmlToAdd='two'；

或者

和在组件中

     @ViewChild('one') d1:ElementRef;

     ngAfterViewInit() {
         d1.nativeElement.insertAdjacentHTML('beforeend', '<div 
              class="two">two</div>');
     }

@ViewChild（'one'）d1:ElementRef；
ngAfterViewInit（）{
d1.nativeElement.insertAdjacentHTML（'beforeend'，'two'）；
}

或阻止直接DOM访问：

构造函数（私有呈现器：呈现器）{}
@ViewChild（“一”）d1:ElementRef；
ngAfterViewInit（）{
this.renderer.invokeElementMethod（this.d1.nativeElement'，
“insertAdjacentHTML”[“beforeed”，“two']）；
}

3.

构造函数（私有elementRef:elementRef）{}
ngAfterViewInit（）{
var d1=this.elementRef.nativeElement.querySelector（'.one'）；
d1.插入相邻的TML（'beforeend'，'two'）；
}

---

对要显示的按钮进行计数，使用

*ngFor

渲染按钮，在用户事件发生时按计数器递增accordingly@sinanspd不幸的是，按钮并不都是平等的：我必须根据用户的不同动作注入特定的属性。你能用一个例子更新这个问题吗？我仍然相信这是可以通过ngFor实现的，您可以创建一个包含这些属性的对象，将其放入数组并基于该数组进行构建

    <div class="one" [innerHtml]="htmlToAdd"></div>
          this.htmlToAdd = '<div class="two">two</div>';

    <div class="one" #one></div>

     @ViewChild('one') d1:ElementRef;

     ngAfterViewInit() {
         d1.nativeElement.insertAdjacentHTML('beforeend', '<div 
              class="two">two</div>');
     }

 constructor(private renderer:Renderer) {}

 @ViewChild('one') d1:ElementRef;

 ngAfterViewInit() {
     this.renderer.invokeElementMethod(this.d1.nativeElement', 
        'insertAdjacentHTML' ['beforeend', '<div class="two">two</div>']);
 }

    constructor(private elementRef:ElementRef) {}

    ngAfterViewInit() {
       var d1 = this.elementRef.nativeElement.querySelector('.one');
       d1.insertAdjacentHTML('beforeend', '<div class="two">two</div>');
     }