Question

我有一个对话框，其中的内容是我从工厂传递数据 dailog的html如下：

<mat-dialog-content>
            <div [innerHTML]="data.message"></div>

</mat-dialog-content>

我已经传递了我的数据，如下所示：

 const message = `<div style="display:inline">
 <div style="float:left ; width: 70%">I love angular</div>
 <div style="float:right ; width: 30%">
 <img src="../../../assets/images/angular.jpg" /></div>
 </div>`;

我正在正确渲染html但没有样式。我想减小图像的大小但是当我得到输出时我不会在dom中使用样式。我哪里错了？

Answer 1

你需要在那里使用这一个

[ngStyle]="{'display': 'inline'}"

或

 [style.display]="'inline'"

完成任务

Answer 2

我相信Angular会清理从控制器传递的HTML，因此它不会在.ts文件中添加样式。为避免这种情况，您可以在构造函数

中添加DomSantizer服务

private sanitizer:DomSanitizer

并使用它来清理你的HTML

return this.sanitizer.bypassSecurityTrustHtml(message);

或者，通过创建管道

@Pipe({name: 'safeHtml'})
export class Safe {
  constructor(private sanitizer:DomSanitizer){}

  transform(style) {
    return this.sanitizer.bypassSecurityTrustHtml(style);
    //return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
  }
}

然后只需使用

<div [innerHTML]="data.message | safeHtml">

请参阅此处的文档：https://angular.io/api/platform-browser/DomSanitizer

从这里引用：https://stackoverflow.com/a/41089093/7435344

Answer 3

出于安全原因，Angular可以防止攻击者将恶意客户端脚本注入网页。

绕过角度保护

某些应用程序确实需要包含可执行脚本或样式。在这种情况下，您将禁用Angular的内置清理。为此，我们创建一个管道并将DomSanitizer服务注入管道的构造函数，并根据上下文调用以下方法之一来标记值安全。

bypassSecurityTrustHtml
bypassSecurityTrustScript
bypassSecurityTrustStyle
bypassSecurityTrustUrl
bypassSecurityTrustResourceUrl。

你需要为它创建管道，下面是相同的代码：的 htmlParse.ts：

import { Pipe, PipeTransform } from '@angular/core'; import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser'; @Pipe({ name: 'safe' }) export class SafePipe implements PipeTransform { constructor(protected sanitizer: DomSanitizer) {} public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl { switch (type) { case 'html': return this.sanitizer.bypassSecurityTrustHtml(value); case 'style': return this.sanitizer.bypassSecurityTrustStyle(value); case 'script': return this.sanitizer.bypassSecurityTrustScript(value); case 'url': return this.sanitizer.bypassSecurityTrustUrl(value); case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value); default: throw new Error(`Invalid safe type specified: ${type}`); } } }

然后你需要在你的module.ts文件中声明它：

import { SafePipe } from '../pipes/htmlparse'; @NgModule({ declarations: [ AppComponent, SafePipe ], imports: [ BrowserModule, HttpModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

然后你可以使用带有innerHtml属性的管道：

<div [innerHTML]="data.message | safe:'html'"></div>

传递带有控制器样式的html到angular4

3 个答案: