javascript - 如何在 Angular 2 的 PipeTransform 中使用自定义组件？

Question

我想在管道转换中使用自定义组件 Status，但它不起作用。

浏览器仅显示不带 < Status /> 的值。就像我的组件没有被调用一样。

为什么？请问如何解决？

组件状态已添加到应用程序模块中。

status.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'status'
})
export class StatusPipe implements PipeTransform {

  transform(value: any): string {
    let status = '<Status type="ok"><b>' + value + '</b></Status>';
    return status;
  }

}

index.html

<td [innerHtml]="result.status | status"></td>

status.component.ts

import { Component, ViewEncapsulation, Input } from '@angular/core';

@Component({
   selector: 'Status',
    template: '<span class="status status--{{ type }}">
      <span class="status__message">
         <ng-content></ng-content>
      </span>
   </span>',
   styleUrls: ['./status.component.css'],
   encapsulation: ViewEncapsulation.None

})
export class StatusComponent {

    @Input() type:any;    

}

Answer 1

因为你试图给它 HTML 值，而它应该是文本值。

试试这个:

<span [innerHTML]="yourValue | status"></span>

而不是

<span>{{yourValue | status}}</span>