Question

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

浏览器仅显示没有< 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>

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

1 个答案: