Question

我想显示搜索结果。当点击匹配的单词时，我想导航到找到单词的页面。所以我的搜索服务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>

问题是，如果将其作为内部html添加到结果页面中，则由于Angular 2安全性，显然不会编译指令。我搜索了一个解决方案。不推荐使用DynamicComponentLoader。建议的方法可能是创建一个组件，但我不知道如何为这种类型的数据做一个组件。

Answer 1

可以使用

ComponentFactoryResolver代替DynamicComponentLoader：

export class Foo implements OnInit {
    // The search function should be passed as an input

    constructor(private viewRef: ViewContainerRef, private dcl: ComponentFactoryResolver) { }
    ngOnInit(){
      let cmpRef: ComponentRef<Foo>=this.viewRef.createComponent(this.dcl.resolveComponentFactory(AutocompleteList));
    }
}

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

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

然后在你的模板中执行类似的操作（我之前提到的管道在这里称为highlight）：

<li *ngFor="let res of results">
  <ng-container *ngFor="let result of res | highlight" [ngSwitch]="result.highlight">
    <ng-container *ngSwitchCase="false">{{result.value}}</ng-container>
    <a *ngSwitchCase="true" class="highlight" (click)="openPage('pageId', 'elementId')">{{highlight.value}}</a>
  </ng-container>
</li>

这应该产生你的预期输出......

使用指令显示内部HTML

1 个答案: