Angular 使用指令显示内部HTML

我想显示搜索结果。单击匹配的单词时，我希望导航到找到该单词的页面。 因此，我的搜索服务HTML如下所示：

<li> Consequat torquatos at his, aeterno intellegebat ea vel. <a class="highlight" (click)="openPage('pageId', 'elementId')">Lorem</a> ipsum dolor sit amet, te pro deserunt philosophia, est ex reque volutpat.</li>

在他的办公室里，一个智能的水平。洛雷姆·伊普苏姆·多洛尔·希特（Lorem ipsum dolor sit amet），这是一位哲学大师，他是一位杰出的艺术家

---

问题是，如果将其作为内部html添加到结果页面中，由于Angular 2的安全性，指令显然不会被编译。我在寻找解决办法。DynamicComponentLoader已弃用。建议的方法可能是创建一个组件，但我不知道如何为这种类型的数据创建一个组件。

ComponentFactoryResolver

可以用来代替

DynamicComponentLoader

：

导出类Foo实现OnInit{
//搜索函数应作为输入传递
构造函数（私有viewRef:ViewContainerRef，私有dcl:ComponentFactoryResolver）{}
恩戈尼尼特（）{
让cmpRef:ComponentRef=this.viewRef.createComponent（this.dcl.resolveComponentFactory（AutocompleteList））；
}
}

但事实上，我认为你不需要使用它。您应该实现一个管道，将文本拆分为一个对象数组，如下所示：

[
  {
    value:"foo",
    highlighted:false
  },
  {
    value:"bar",
    highlighted:true
  }
]

然后在模板中执行以下操作（我前面提到的管道称为

高亮显示
：


{{result.value}
{{highlight.value}}


这将产生您预期的输出…
感谢您的回答，我将了解如何使用DynamicComponent loader。您能否更新代码段，了解如何将结果组件绑定到ui？如果我有一个带有指令的html字符串数组，那么如何处理它们以在ui中显示它们，并且指令可以工作。这个代码段将组件绑定到当前视图（最后）。不能动态使用指令。因此，您最好创建一个组件来处理结果列表，并在输入旁边动态地实例化该组件（我猜这是一个自动完成）。结果组件应该有两个可观察的属性：“highlight”和“dataSource”作为
@Input（）
，您可以从
cmpRef
变量访问它。它不是自动完成的，它是全文搜索，我需要将用户从搜索结果返回到文本中。我接受您的答案，尽管它不能解决我的问题。仅角度组件方向不允许我处理复杂数据。管道不是解决方案，因为分割搜索结果并不容易，而且据我所知，即使ComponentFactoryResolver也不允许使用指令。