如何在angular

Question

将组件通过另一个组件中的函数显示时，我无法显示该组件。

这是我的代码（主要组成部分）：

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

    @Component({
      selector: 'app-body',
      templateUrl: './body.component.html'
    })
    export class BodyComponent implements OnInit{
    dtOptions: DataTables.Settings = {};

    customizing() {
        let html = `<app-button></app-button>`;
        console.log("ingresa");
        var element = document.getElementsByClassName("personalizado");

        element[0].innerHTML=html;
      }

    ngOnInit() {

         let scope = this;

          this.dtOptions = {
          dom: "<'row'"+
          "<'.extra-elements personalizado'>"+
          "<'.extra-elements'<li>>>"+
         "<'row'<'.col-12'<t>>>"+
         "<'row'<'.col-12'p>>",
          pagingType: 'full_numbers',
          initComplete: function(settings, json) {
            scope.personalizado();
          }
        };
      }

我在函数 customizing（）中调用 <应用程序按钮> <./ app-button> ，并使用innerHTML放置应用程序按钮的所有内容。那是行不通的，没有编译应用程序按钮，渲染的渲染仅在简单标签中显示dom中的标签。

这是应用程序按钮组件：

<div class='col'><button type='button' class='btn btn-dark'>Clicked</button></div>

换句话说，DOM像标签一样显示应用程序按钮，而不编译按钮HTML。

有办法吗？

Answer 1

需要编译模板，您不能将组件选择器插入html，然后期望它被呈现。您可以使用ngIf或ngFor有条件地渲染组件。

在./body.component.html

中

<app-button *ngIf="conditionToShowButton">Button Text</app-button>

或

<app-button *ngFor="let btn of btns">{{btn.text}}</app-button>

有关按钮列表。