web-dev-qa-db-ja.com

angle2パイプの戻り値でhtmlを許可する方法は？

Html文字列を返すパイプがありますが、文字列出力はおそらくセキュリティのデフォルトとしてエスケープされています。代わりにhtmlを許可するオプションがあるはずですが、ドキュメントを検索すると見つけることができません。

実際のhtmlのレンダリングを許可するようにパイプに指示するにはどうすればよいですか？

pipeangular
42
rgb

innerHTML または outerHTML へのバインディングを使用して、すでにエスケープされたhtmlをレンダリングします。例えば ​​<span [innerHTML]="someString | toHtmlPipe"></span>。 this plunk を参照してください：

@Pipe({
  name: 'wrapBold'
})
class WrapBold {
  transform(content) {
    return `<b>${content}</b>`;
  }
}

@Component({
  selector: 'my-app',
  pipes: [WrapBold],
  template: `
    <div>
      Hello <span [outerHTML]="content | wrapBold"></span>
    </div>
  `
})
export class App {
  constructor() {
    this.content = 'Angular2'
  }
}
82
alexpods

返信ありがとうございます。

@alexpodsによって提案されたouterHTMLバインディングを使用すると、うまくいきました。パイプを変更する必要はまったくありませんでした。

だから私が前にやっていたこと：

{{'TEXT' | hn: 'h2.whatever'}}これは正しいHTMLになりましたが、エスケープされました。

&lt;h2 class="whatever"&gt;TEXT&lt;/h2&gt;

すばらしい作品：<span [outerHTML]="'TEXT' | hn:'h2.whatever'"></span>

出力：<h2 class="whatever">TEXT</h2>

7
rgb

それがパイプで可能かどうかはわかりません。 （@alexpodsの答えをご覧ください。）

パイプを入力プロパティを持つコンポーネントに変換することを検討しましたか？つまり、パイプに供給しているものは何でも、それをコンポーネントの入力プロパティにします。パイプが生成するHTMLをコンポーネントのテンプレートに配置します。

7
Mark Rajcok

したがって、テキストを取得してHTMLとして表示する必要があります。文字列が実際のHTMLである場合、なぜコンポーネントではないのですか？これは、HTMLをレンダリングするパイプの機能ではありません。ただし、たとえば、インデント付きのJSON値など、改行付きのテキストをレンダリングする場合は、pre HTML要素を使用します。

{{obj | myPipe}}

ただし、質問に対する実際の応答として、innerHtml応答に賛成票を投じます。

0
Siderite Zackwehdex