单击时附加 angular 组件

Question

我想在 div 中添加一个组件 class myBLock 单击按钮

code:
<div class="myExample">
    <button (click)="addComponent()">
    </button>
</div>
<div class="myBlock">
</div>

Answer 1

如果要添加html:

html

<div class="myBlock" #block>
</div>

在组件中：

@ViewChild('block') block:ElementRef;

addComponent() {
  block.nativeElement.insertAdjacentHTML('beforeend', '<div></div>');
}

如果您想添加一个组件，您需要动态添加：

Answer 2

您可以根据按钮点击将组件变量设置为 true / false。然后根据变量值，show/hide分量。

<div>
  <button (click)='showMyBlock = !showMyBlock'>
  </button>
</div>

<another-component *ngIf='showMyBlock'>
</another-component>

append angular component on click