Question

从后端我会收到像'©Acme'这样的字符串。现在我将问题设置为img标签的标题属性。

[title]或[attr.title]会按原样设置字符串（©，而不是©）

我无法弄清楚有助于在属性中呈现html实体的指令或管道。有这样的指令

import {Directive, ElementRef, Inject, Input, OnInit, Renderer2, SecurityContext} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';

@Directive({
  selector: '[trustedTitle]'
})
export class TrustedTitleDirective implements OnInit {

  @Input() trustedTitle: string;

  constructor(@Inject(DomSanitizer) private sanitizer: DomSanitizer, private el: ElementRef, private renderer: Renderer2) {
  }

  ngOnInit() {
    const safeHtml = this.sanitizer.sanitize(SecurityContext.HTML, this.trustedTitle);
    console.log('Trusted Title:', safeHtml);
    this.renderer.setAttribute(this.el.nativeElement, 'title', safeHtml);
  }

}

例如，我最终得到一个显示© Acme的标题。

BTW：我正在使用Angular版本^ 4.0.0。

更新

问题似乎是需要重新解析javascript字符串变量。现在这看起来很明显，我通常会使用[innerHtml]来完成它。但由于我不得不处理title属性，所以我现在最终得到了一个自定义组件：

import {Directive, ElementRef, Input, OnInit, } from '@angular/core';

@Directive({
  selector: '[trustedTitle]'
})
export class TrustedTitleDirective implements OnInit {

  @Input() trustedTitle: string;

  constructor(private el: ElementRef) {
  }

  ngOnInit() {
    this.el.nativeElement.title = this.parseHtmlTextStr(this.trustedTitle);
  }

  /**
   * Parses HTML Entities in a string.
   * return parsed string or fall back to original.
   */
  parseHtmlTextStr(str: string): string {

   const temp = document.createElement('template');
   temp.innerHTML = str;
   str = temp.innerHTML;

   temp.remove();
   return str;
 }
}

这看起来和感觉对我来说仍然非常hacky。因此，如果有人想出更优雅的东西，我们将非常感激。

Answer 1

使用DomSanitizationService

工作plunkr https://plnkr.co/edit/B5qWrcriBtCNghae39DQ?p=preview

//our root app component
import {Component, Pipe} from '@angular/core'
import {DomSanitizationService} from '@angular/platform-browser';

@Component({
  selector: 'my-app',

  template: `
   <img src="smiley.gif" alt="Smiley face" width="42" height="42" [title]="getSanitizedContent('&copy;avb')">

  `,
})
export class AppComponent {

  dangerousUrl='&copy;';

  constructor(public sanitizer: DomSanitizationService) {
  }

  getSanitizedContent(abc:String){
    console.log(this.sanitizer.bypassSecurityTrustHtml(abc));
    return this.sanitizer.bypassSecurityTrustHtml(abc).changingThisBreaksApplicationSecurity;
  }

}

修改 DomSanitizationService已删除＆amp;现在我们在Angular4中有DomSanitizer

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

完整示例代码：

组件

import { Component } from '@angular/core'; import { DomSanitizer} from '@angular/platform-browser'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app works!'; constructor(public sanitizer:DomSanitizer){ } getSanitizedContent(abc:string){ console.log(this.sanitizer.bypassSecurityTrustHtml(abc)); return this.sanitizer.bypassSecurityTrustHtml(abc)["changingThisBreaksApplicationSecurity"]; } }

模板：

<img src="smiley.gif" alt="Smiley face" width="42" height="42" [title]="getSanitizedContent('©avb')">

如何在Angular中使用html实体设置img title属性？

更新

1 个答案: