Как передать DomSanitizer в качестве аргумента в машинописи на канал? - PullRequest
Новая
       35

Как передать DomSanitizer в качестве аргумента в машинописи на канал?

0 голосов
/ 24 декабря 2018

Я использую канал для отображения периконов , который имеет следующий код: 

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

import { icons } from 'feather-icons'; // v4+

@Pipe({ name: 'feather' })
export class FeatherIconsPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) {}

  transform(icon: string, size: number = 18, color: string = 'inherit', float: string = 'inline-end') {
    return this.sanitizer.bypassSecurityTrustHtml(icons[icon].toSvg({
      width: size,
      height: size,
      color: color,
      float: float
    }));
  }
}

Как вы можете видеть, он использует DomSanitizer.Я использую канал в HTML следующим образом: 

 <span [innerHTML]="'home' | feather"></span>

Работает нормально.Но теперь мне нужно сделать то же самое с помощью машинописи.Я попытался: 

const span = this._renderer2.createElement('span');
let name = new FeatherIconsPipe().transform('home');
this._renderer2.setProperty(span, 'innerHTML', name);

Но выдает ошибку:

Ожидается 1 аргумент, но получено 0.ts (2554) feather-pipe.ts (9, 15): Anаргумент для 'sanitizer' не был предоставлен.

Затем я попытался 

private sanitizer : DomSanitizer = this.sanitizer;
...
let name = new FeatherIconsPipe(this.sanitizer).transform('home');

Но канал выводит:

Невозможно прочитать свойство 'bypassSecurityTrustHtml'из неопределенного.

Как я могу установить innerHTML с конвейером, используя машинопись?

1 Ответ

0 голосов
/ 24 декабря 2018

Необходимо добавить sanitizer в конструктор в вашем компоненте 

  constructor(private _renderer2: Renderer2, private sanitizer: DomSanitizer){

     new FeatherIconsPipe(this.sanitizer).transform('home');

Демо

...