Question

努力寻找解决方案。

我正在尝试用从另一个库生成的html替换元素的innerHtml。看起来很简单，但当然不适用于Angular 2。我基本上是在Angular 2 app指令中包装google-prettify-code脚本。

在包含我的美化指令的组件html中我想添加这样的东西。

<pre dg-prettify>
    &lt;div class=&quot;foobar&quot;&gt;
     &lt;div&gt;Hello World&lt;/div&gt;
   &lt;/div&gt;
</pre>

然后在我的美化指令中，我需要获取pre标签的innerHtml并将其传递给外部库进行处理。我将返回一个解码后的html结构，然后需要将其注入pre标签的innerHtml中，替换它的原始内容。

Answer 1

如果组件HTML内容是静态的，那么这样的东西应该可以工作：

@Directive({
  selector: '[dg-prettify]'
})
export class Prettify {
  constructor(private elRef:ElementRef) {}
  ngOnInit() {
    let innerHTML = this.elRef.nativeElement.innerHTML;
    console.log(innerHTML);
    // call 3rd-party library
    let newHtml = someExternalLibraryFunction(innerHtml);
    this.elRef.nativeElement.innerHTML = newHtml;
  }
}

@Component({
  selector: 'my-app',
  template: `<pre dg-prettify>
    &lt;div class=&quot;foobar&quot;&gt;
     &lt;div&gt;Hello World&lt;/div&gt;
   &lt;/div&gt;
</pre>`,
  directives: [Prettify]
})
export class AppComponent {
  constructor() { console.clear(); 
}

Plunker

如果组件HTML内容是动态的，那么将该内容作为字符串输入属性传递给指令，并在内容发生更改时实现lifecycle hook ngOnChange()更新innerHTML。

Angular 2指令和DOM操作

1 个答案: