Как динамически внедрить кнопки в приложение Angular 6?

Question

Я создаю веб-приложение с компонентом, который отображает кнопки пользовательского интерфейса материала на основе данных, полученных от API.

Workflow:

Рабочий процесс компонента, который я пытаюсь построить, работает следующим образом:

(1) страница загружается, выполняет вызов API для получения 30 случайных слов из бэкэнда, и первые три слова отображаются для пользователя в виде кнопок

(2) Пользователь нажимает на одно слово. Два других автоматически отключаются. Следующие три слова выбираются и отображаются / вводятся как новые кнопки на странице.

(3) Когда все 30 слов будут показаны пользователю, при следующем щелчке будет получено еще 30, и процесс будет продолжаться бесконечно.

Как лучше всего динамически генерировать эти кнопки и вставлять их в пользовательский интерфейс?

Ниже приведены фрагменты моего кода. Хотя, если у кого-то есть лучший подход, я с удовольствием воспользуюсь им! :)

Образец данных:

["word1", "word2", "word3", …, "word30"]

Шаблон:

 this.templateButtonRow$ = `
      <div class="button-row">
        <button mat-raised-button (click)="registerWord(WORD)">
          WORD
        </button>
      </div>`;

Код впрыска:

@ViewChild('buttonrows', {read: ViewContainerRef}) vc: ViewContainerRef;
…
const tmpCmp = Component({template: this.templateButtonRow$})(class {});
  const tmpModule = NgModule({declarations: [tmpCmp], entryComponents: [tmpCmp]})(class {});
  this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
    .then((factories) => {
      const f = factories.componentFactories[0];
      const cmpRef = f.create(this._injector, [], null, this._m);
      cmpRef.instance.name = 'B component';
      this.vc.insert(cmpRef.hostView)
    });

Проблемы:

• Приведенный выше код вставляет необработанный HTML. Он не скомпилирован для применения пользовательского интерфейса материала.
• Кроме того, когда мы нажимаем на кнопку, ее контекст недействителен, и функция registerWord () не может быть вызвана.

** Снимок экрана: **

Заранее спасибо за помощь!

С уважением, Alex

Answer 1

Это плохой подход к динамическому отображению и скрытию элемента в Angular, его следует избегать, если у вас нет веских причин для этого.

Кстати, вы объявляете свой компонент во временном модуле, но этот модуль не импортировал MatButtonModule, поэтому Angular не может разрешить директивы.

Импорт MatButtonModule во временный модуль:

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