如何将按钮动态注入Angular 6应用？

Question

我正在构建一个Web应用程序，其中包含一个组件，该组件显示从API接收到的基于数据的Material UI按钮。

工作流程：

我要构建的组件的工作流程如下：

（1）页面加载，进行API调用以从后端接收30个随机单词，并且前三个单词以按钮形式显示给用户

（2）用户单击一个单词。然后自动禁用其他两个。以下三个词被选择并显示/注入为页面上的新按钮。

（3）当所有30个单词都显示给用户时，下一次单击将检索到另外30个单词，并且该过程将无限期地继续。

动态生成这些按钮并将其插入到UI中的最佳方法是什么？

下面是到目前为止我的代码片段。虽然，如果有人有更好的方法，我会很乐意使用它！ ：）

数据示例：

["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。尚未编译以应用Material UI。
• 此外，当我们单击按钮时，它的上下文是无效的，并且无法调用registerWord（）函数。

**屏幕截图：**

提前感谢您的帮助！

此致， 亚历克斯

Answer 1

这是在Angular中动态显示和隐藏元素的一种不好的方法，如果您没有充分的理由这样做，则应避免使用它。

顺便说一句，您是在一个临时模块中声明您的组件，但是该模块尚未导入MatButtonModule，因此Angular无法解析指令。

在您的临时模块中导入MatButtonModule：

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