Maksclub
@Maksclub
maksfedorov.ru

Почему is not a known element при динамическом создании компонента?

Вот шаблон:
<ng-container *ngTemplateOutlet="staticForm"></ng-container>

<template #formDynamic></template>

<ng-template #staticForm>
  <form class="container" [formGroup]="testForm">
    <tui-text-area formControlName="value">Введите текст</tui-text-area>
  </form>
</ng-template>


Вот код из создания динамического шаблона:
compileFromRaw(template: string, data: any): ViewRef {

    const styles: string[] = [];
    function TmpCmpConstructor() {
      // @ts-ignore
      this.data = data;
    }

    // @ts-ignore
    const templateComponent = Component({template, styles})(new TmpCmpConstructor().constructor);

    const tmpModule = NgModule({
      imports: [],
      declarations: [templateComponent],
    })(class {
    });

    const factories = this.compiler.compileModuleAndAllComponentsSync(tmpModule)
    const f = factories.componentFactories[0];

    this.componentRef = f.create(this.injector, [], null, this.moduleRef);
    this.componentRef.instance.name = 'my-dynamic-component';

    return this.componentRef.hostView;
  }


Вот так создаю новый компонент и вставляю в динамический шаблон:
this.container.insert(this.compiler.compileFromRaw(
        '<form class="container" [formGroup]="testForm">\n' +
        '    <tui-text-area formControlName="value">{{data}}</tui-text-area>\n' +
        '  </form>',
        'Введите текст 2',
      ));


ИТОГ: html сгенерировался верно и data подставилась, но ругается, что NG0304: 'tui-text-area' is not a known element, статическая версия вывелась корректно!

607c61c6ee47d165262002.png

Уже второй день вожусь с этим, не могу разобраться, с фронтендом всего неделю работаю
  • Вопрос задан
  • 110 просмотров
Решения вопроса 1
@Sun_Day
Что-то код слегка ужасный. Особенно если это будут после вас поддерживать. Лучше из оф доки один в один скопировать, есть примеры.

Не знаю что статически там вывелось, но ошибка указывает на то, что tui-text-area не задекларирован. tui-text-area нужно добавить в declarations модуля, или импортировать модуль, в котором подключается этот компонент.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы