Question

我曾经使用离子1（angularjs）创建自定义过滤器，然后在模板{{data | customfilter }}或控制器str = $filter('customfilter')(data);中使用它们。

现在我刚刚创建了一个带有角度2的管道，但是如何在打字稿代码中使用它？

由于

的src /管/ nospace.ts：

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

@Pipe({
  name: 'nospace'
})
export class Nospace {
  transform(value, args) {
    return (!value) ? '' : value.replace(/ /g, '');
  }
}

的src /页/ page.ts：

import {Component} from '@angular/core';
import {Nospace} from '../../pipes/nospace';

@Component({
  templateUrl: 'build/pages/home/home.html',
  pipes: [Nospace]
})
export class HomePage {

  myString: any;

  constructor() {
    this.myString = "Pipes are super cool";
    //I want to use the pipe here !
  }
}

Answer 1

这是我的Angular Concepts Repository。如果对管道的使用方法有一个非常简单的了解，请检查一下，还有一个工作演示。

import { SquarePipe } from './square.pipe';

describe('SquarePipe', () => {

  let pipe :SquarePipe;

  beforeEach(() => {
    pipe = new SquarePipe();
  });

  it('transforms 2 to 4', () => {
    let value: any = 2;
    expect(pipe.transform(value)).toEqual(4);
  });

});

点击此链接了解详情link

Answer 2

使用nospace.ts直接在组件内使用管道，查看this plunk Rahul Singh所指的内容：

<强> app.ts

//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Nospace } from '../nospace';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Original: {{name}}</h2>
      <h2>No spaces: {{nameNospace}}</h2>
    </div>
  `,
})
export class App {
  name: string;
  nameNospace: string;
  noSpaceTransform: Nospace = new Nospace();

  constructor() {
    this.name = `Plunker! v${VERSION.full}`;
    this.nameNospace = this.noSpaceTransform.transform(this.name);
  }
}

@NgModule({
  imports: [BrowserModule],
  declarations: [App],
  bootstrap: [App],
})
export class AppModule {}

Angular 2：如何在组件逻辑代码中使用自定义管道，而不是在模板中

2 个答案: