【问题标题】：Angular input interpolation角度输入插值
【发布时间】：2019-07-22 21:47:07
【问题描述】：

我在my.component.ts 文件中使用此代码：

// ...
export class MyComponent implements OnInit {
  user: any;
  icons = {
    search: faSearch // FontAwesome icon, it's imported
  };
  textContent = `<div class="input-group">
            <input type="text" name="search-string" placeholder="Search...">
            <div class="input-group-append">
              <button type="submit" class="btn btn-sm btn-default">
                <fa-icon icon="${ this.icons.search }"></fa-icon>
              </button>
            </div>
          </div>`;
// ...

并尝试像这样在my.component.html 文件中使用：

<div [innerHTML]="textContent"></div>

Angular 渲染这段代码：

<div class="input-group">
  <div class="input-group-append"></div>
</div>

其他代码不见了……知道为什么吗？

【问题讨论】：

这似乎违背了角度框架。以至于我会质疑为什么你甚至首先使用角度。为什么你不使用 Angular 来做它最擅长的事情（为你生成 html）？似乎是一个糟糕的设计。

标签： angular interpolation angular8

【解决方案1】：

你检查控制台日志了吗？它可能有这样的消息：

WARNING: sanitizing HTML stripped some content.

此消息表示出于安全原因，某些 HTML 标记已被删除。使用 [innerHTML] 可能是一个安全问题。

在这种情况下，更多的是设计问题，恕我直言。我真的只是建议将表单元素放在模板文件中（即您的my.component.html）。

您想将其放入my.component.ts 文件中是否有特定原因？

编辑：

从评论部分看来，这种构造的原因是允许开发人员在这个组件中（动态地）注入 html。

有很多方法可以做到这一点，其中之一就是内容投影。

<my-component>
  put html in the body.
</my-component>

在 my.component.html 模板文件中，您需要添加一个 <ng-content></ng-content> 节点。正文的 html 将投射到那里。

因此，my.component.html 可能如下所示：

<div>
  This is my component:<br>
  <ng-content></ng-content>
</div>

那么当你使用“我的组件”时，你可以这样做：

<my-component>

  <div class="input-group">
    <input type="text" name="search-string" placeholder="Search...">
    <div class="input-group-append">
      <button type="submit" class="btn btn-sm btn-default">
        <fa-icon icon="fa-search"></fa-icon>
      </button>
    </div>
  </div>

</my-component>

或者，您可以将内部内容移动到不同的组件并执行以下操作：

<my-component>
  <my-child-component> </my-child-component>
</my-component>

【讨论】：

我只是想让你超过 9k。另外，我同意这个评论/答案
是的，这是一个具体的原因。因为这将是一个多级导航“构造器”，开发人员可以在其中将 HTML 代码定义为下拉菜单项，例如这个搜索表单。
@netdjw ，我希望这个额外的编辑能够为您指明更好的解决方案的正确方向。

【解决方案2】：

您可以使用@ViewChild 来实现此目的。这里的诀窍是制作static:true，简而言之，它会跳过角度变化检测周期。您可以从this post 找到更多关于静态道具的信息。

Stackblitz Demo

.html

<div #dataContainer></div>

.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  icons = {
    search: 'faSearch'
  };
  @ViewChild('dataContainer', { static: true }) dataContainer: ElementRef;

  ngOnInit() {
    this.dataContainer.nativeElement.innerHTML = `<div class="input-group">
            <input type="text" name="search-string" placeholder="Search...">
            <div class="input-group-append">
              <button type="submit" class="btn btn-sm btn-default">
                 <fa-icon icon="${ this.icons.search}"></fa-icon>
              </button>
            </div>
          </div>`;
  }

}

【讨论】：