Question

我有这个printValue变量，在我的角度组件中带有HTML按钮代码，如下所示：

export class HomeComponent implements OnInit {

  printValue = '<button type="button" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Popover</button>';

  constructor(){}
  OnInit(){}

}

问题是，一旦将printValue变量放置在innerHTML内，如何使弹出框起作用，如下所示：

<p [innerHTML]="printValue"></p>

这样做

<body>
<button type="button" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Popover</button>
</body>

直接在html文件中的

可以使弹出窗口起作用。但是如何使其在innerHTML属性中起作用？

Answer 1

在您的html

TINYINT

然后，在您的ts文件中，

<div #container></div>

Answer 2

进行一些更改，如下面的代码所示：

export class HomeComponent implements OnInit {
  printValue : string = '<button type="button" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Popover</button>';
  constructor(){}
  OnInit(){}
}

如果它不起作用，请尝试在组件中使用 ViewChild 和 ElementRef ：

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

@Component({
    .......
})
export class YourComponent {


    @ViewChild('htmlId') htmlId: ElementRef;

      printValue : string = '<button type="button" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Popover</button>';


    addHTML(data) {
        this.htmlId.nativeElement.innerHTML = printValue;
    }
}

在您的html中：

希望它会对您有所帮助。

Answer 3

默认情况下，角度清理HTML代码可以避免任何跨站点脚本攻击，但是我们可以通过使用DOMSanitizer跳过这一点，该工具告诉角度所提供的html内容是安全的。寻找参考：Correct way Provide DomSanitizer to Component with Angular 2 RC6

import {BrowserModule, DomSanitizer} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
     <p [innerHtml]="paragraphHtml"></p>
  `,
})
export class App {
  constructor(private domsanitizer: DomSanitizer) {
    this.paragraphHtml = domsanitizer.bypassSecurityTrustHtml('<p>My other child paragraph</p><script>any script function you want to execute</script><div>Thank you</div>') ;
  }
}

如果该解决方案没有帮助，那么其他答案都很好，您可以尝试。

希望有帮助。

如何使放置在innerHTML属性内的Popover起作用？

3 个答案: