Блог

Я не могу показать компонент, когда я передаю его через функцию в другом компоненте.

Это мой код (основной компонент):

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

Я вызываю <app-button ><./app-button> в функции customizing() и помещаю все содержимое app-button, используя innerHTML. Это не работает, app-button не компилируется, а отрисованный тег отображается в dom, но только как простой тег.

Это компонент app-button:

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

Другими словами, DOM показывает app-button как тег, а не скомпилированный HTML-код кнопки.

Есть ли способ сделать это?

Необходимо соблюдать шаблоны, вы не можете ввести селектор компонентов в 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>
  

Для списка кнопок.