如何在 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>