如何在 ts 而不是 HTML 中使用管道答案

【问题标题】：How to use pipe in ts not HTML如何在 ts 而不是 HTML 中使用管道
【发布时间】：2017-01-31 21:25:21
【问题描述】：

我将文本从 ts 添加到 html 元素中

喜欢这个

this.legend.append('text')
  .attr('x', legendRectSize + legendSpacing)
  .attr('y', legendRectSize - legendSpacing)
  .text(function(d) { return d; });

这将创建像 html 一样的 html

<text>Data will come here</text>

我想用管道把这些数据转换成某种形式如何从 ts 代码中做到这一点？

当我动态创建这个 HTML 时，我不能像这样使用管道

<text>{{Data will come here | pipename}} </text>

我正在寻找类似的东西

this.legend.append('text')
  .attr('x', legendRectSize + legendSpacing)
  .attr('y', legendRectSize - legendSpacing)
  .text(function(d) { return d; }).applypipe('pipename');

【问题讨论】：

请澄清您的问题。我很难理解你在寻找什么。
现在可以了吗？ @MorKadosh
请添加您的完整打字稿代码。

标签： javascript angular pipe

【解决方案1】：

我必须在多个方法上使用它，所以我声明了一个属性类型：PipeName。

private pipeName: PipeName;

然后在构造函数中。

constructor() {
    this.pipeName = new PipeName();
}

在任何服务注入的情况下。

constructor(
    private anotherService: AnotherService
) {
    this.pipeName = new PipeName(anotherService);
}

使用管道在 .ts 中的任意位置进行转换

this.pipeName.transform(value, format);

例子

import { Component, OnInit } from '@angular/core';
import { LocalizedDatePipe } from '../../../pipes/localized-date.pipe';
import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'edit-appointment',
    templateUrl: './edit-appointment.component.html',
    styleUrls: ['./edit-appointment.component.css']
})
export class EditAppointmentComponent implements OnInit {
    startDate: string;
    localizeDatePipe: LocalizedDatePipe;

    constructor(
        private translateService: TranslateService
    ) {
        this.localizeDatePipe = new LocalizedDatePipe(this.translateService);
    }

    ngOnInit() {
        this.startDate = this.localizeDatePipe.transform('2021-04-08T07:30:00Z', 'd/M/yyyy, h:mm a');
    }
}

【讨论】：

【解决方案2】：

首先在组件中导入您的管道。然后在您的组件中使用您的管道。像这样..

pipe.ts

/**
 * filter checkbox list
 */
@Pipe({ name: 'filter', pure: true })
export class FilterPipe{
  transform(items: any[], args: any): any {
    let filter = args.toString();
    if(filter !== undefined && filter.length !== null){
        if(filter.length === 0 || items.length ===0){
            return items;
        }else{
            return filter ? items.filter(item=> item.title.toLocaleLowerCase().indexOf(filter) != -1) : items;
        }
    }
  }
}

component.ts（在您的打字稿代码中使用）

const filterPipe = new FilterPipe();
const fiteredArr = filterPipe.transform(chkArray,txtSearch);

xyz.html（在您的 html 文件中使用）

<ul>
    <li *ngFor="todo for todos | filter:'txtsearch'"> {{todo.name}} </li>
</ul>

【讨论】：

我的问题是 diffrenet 如何在 javascript 或 typescript 代码中使用此管道，但在 html 中没有
我的答案也是在 typescript 中使用管道。不是，在 HTML 中使用
pure: true 是默认... (angular.io/guide/pipes#pure-and-impure-pipes)
管道不应该注入到构造函数里面吗？

【解决方案3】：

在您的 .ts 中

import {YourPipe} from '/pipePath';


let value = new YourPipe().transform(param);

【讨论】：

是的！真的就是这么简单！

【解决方案4】：

在组件中导入管道

import { PipeName } from './pipename'

将其包含在提供中

@Component({
    selector: 'pipe-using-component',
    templateUrl: './pipe-using-component.html',
    providers: [
        PipeName
    ],
})

在构造函数中注入

export class PipeUsingComponent {
  constructor(private pipeName: PipeName)
   }

   var requiredResult = this.pipeName.transform(passvalue);
}

【讨论】：

【解决方案5】：

如果 Pipename 是您的自定义管道，那么如果您想在 ts 文件中使用相同的管道，那么您可以使用以下代码

import {Pipename} from './pipename';

Pipename.prototype.transform(arguments);//this is how u can use your custom pipe

【讨论】：

这正是我想要的
不过，如果 constructor 在管道类中使用，你会绕过它，谁知道 @Pipe 会添加什么？