Angular 2 SafeValue必须使用[property] = binding with input

时间:2017-06-13 21:14:09

标签: javascript angular pipes-filters

我想用输入字段替换某些单词,我已创建方法,必须替换和输入字段的安全插入管道,但它不起作用...我做错了什么?请帮忙! 这是我的代码

part2.component.ts

import { Component, OnInit} from '@angular/core';
import { DataService } from '../sample02-simpleService/data.service';
@Component({
  moduleId: module.id,
  selector: 'part2',
  template: `
    <p>{{itemsSource | sanitizeHtml}}</p>    
  `,
  providers: [DataService]

})
export class Part2Component implements OnInit {
  public itemsSource: string;
  constructor(public dataService: DataService) {
  }

  ngOnInit() {
    this.abc = this.dataService.getData3();
    this.itemsSource = this.dataService.getData2();
    this.abc.forEach(str => {
      let regExp = new RegExp(str.toString(), 'g');
      this.itemsSource = this.itemsSource.replace(regExp, '<input/>');
    });
  }
}

我从DataService获取数据

import { Injectable } from '@angular/core';
          @Injectable()
export class DataService {
            getData2() {
              let items3: string = 'Das ist unsere Erde. Die Erde ist ein Planet. ' +
              'Sie ist der einzige Planet auf dem wir leben können. ' +
              'Auf keinem anderen Planet gibt es Menschen oder Tieren.Es gibt acht Planeten. ' +
              'Dass ist meine Lieblings.';
              return items3;
            }
            getData3(){
              let items4: string[] = ['Planeten', 'Planeten', 'eine', 'Tiere', 'viele', 'Planet', 'keine', 'meine'];
              return items4;
            }
          }

我在这里有自定义管道

import {
  Pipe,
  PipeTransform
} from '@angular/core';
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtml implements PipeTransform  {

  constructor(private _sanitizer: DomSanitizer) {}

  transform(v: string): SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(v);
  }
}

我想,我非常接近正确答案,请帮助我......

0 个答案:

没有答案