Angular 2 - innerHTML样式

我从HTTP调用中获得了大量的HTML代码。我把HTML块放在一个变量，并将它插入到我的页面[innerHTML]，但我不能样式插入的HTML块。有人有什么建议吗?

@Component({
  selector: 'calendar',
  template: '<div [innerHTML]="calendar"></div>',
  providers: [HomeService], 
  styles: [`h3 { color: red; }`]
})

我想要样式的HTML是包含在变量“日历”中的块。

当前回答

我最初执行this.sanitizer.bypassSecurityTrustHtml()路由，并将封装设置为ViewEncapsulation。没有，但有两个问题:

ViewEncapsulation。NONE在我的组件中引起了其他样式问题我的“安全”html似乎不工作与css变量，即var(——蓝色)

这对我来说是有效的(不需要更改任何其他内容):InsertAdjacentHTML

模板:

<div id=template></div>

代码:

ngOnInit() {
  const el = document.getElementById('template');
  el.insertAdjacentHTML('afterbegin', `<span style="color: var(--blue)">hello</span>`);
}

免责声明:在我的例子中，我是从配置文件中解析html。对于用户输入的html，您不会希望走这条路线。

2021-04-17 00:19:42

其他回答

最简单、最直接的方法是使用angular project src文件夹中的全局样式文件。

假设组件选择器是:app-my-component

在app-my-component模板中，向innerHtml内容所在的元素中添加一个类:

<div class="innerhtml-class" [innerHTML]="variable.innerHtml"></div>

添加到全局样式文件:

app-my-component { 
 .innerhtml-class { 
   declaration goes here 
 } 
}

2021-04-17 09:26:59

Günter Zöchbauer推荐的版本很好，但我要做一个补充。在我的例子中，我有一个没有样式的html元素，我不知道如何样式它。因此，我设计了一个管道来添加样式。

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';


@Pipe({
    name: 'StyleClass'
})
export class StyleClassPipe implements PipeTransform {

    constructor(private sanitizer: DomSanitizer) { }
    transform(html: any, styleSelector: any, styleValue: any): SafeHtml {
        const style = ` style = "${styleSelector}: ${styleValue};"`;
        const indexPosition = html.indexOf('>');
        const newHtml = [html.slice(0, indexPosition), style, html.slice(indexPosition)].join('');
        return this.sanitizer.bypassSecurityTrustHtml(newHtml);
    }

}

然后你可以像这样给任何html元素添加样式:

<span [innerhtml]="Variable | StyleClass: 'margin': '0'"> </span>

Variable = '<p> Test </p>'

2020-08-27 13:30:08

如果动态样式有限，使用内联CSS变量是另一种解决方案。

I.e.

// file.ts
someVarWithHtml = 'Hello <span class="dynamic">World</span>';

// file.ng.html
<div [style]="'--my-var: ' + value"
     [innerHTML]="someVarWithHtml"></div>

// style.css
.dynamic {
  background: var(--my-var);
}

2021-08-03 23:41:40

使用下面的方法在innerhtml中允许CSS样式。

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
.
.
.
.
html: SafeHtml;

constructor(protected _sanitizer: DomSanitizer) {
   this.html = this._sanitizer.bypassSecurityTrustHtml(`
        <html>
        <head></head>
        <body>
           <div style="display:flex; color: blue;">
              <div>
                 <h1>Hello World..!!!!!</h1>
              </div>
           </div>
        </body>
        </html>`);
}

示例代码stackblitz

或者使用下面的方法直接在HTML中编写。 https://gist.github.com/klihelp/4dcac910124409fa7bd20f230818c8d1

2021-06-10 04:40:34