首页 文章

Angular 2指令和DOM操作

提问于
浏览 次
2

苦苦寻找解决方案 .

我试图用从另一个库生成的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中，替换它的原始内容 .

angular

1 回答

  • 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 .

    回复于

相关问题