未应用 Angular 4 PipeTransform

Question

我用于缩短字符串的自定义管道无法正常工作。我已将其包含在我的 app.module 声明中并将其导入到我的组件中。代码如下。

 import { Pipe, PipeTransform } from '@angular/core';
/*
  Takes a string and replaces it with a shortend version based on the length you give it if its greater than 14 char for Example
  someString = "hey whats up my name is Bob and im from Bob town"
  {{value | shortString : length of new string}}
  {{someString | shortString: 10}}
*/
@Pipe({name: 'shortString'})
export class shortString implements PipeTransform {
  transform(value: any, length: number): string {
    console.log('expected new string '+value.slice(0,length)+'...');
    return (value.length()>14)?value.slice(0,length)+'...': value;
  }
}`

Answer 1

您的管道本身看起来不错，但为了使用它，您必须将它导入到您的模块中，然后声明和导出它，以便它在您的组件中可用。

import { shortString } from './shortString.pipe';
    
@NgModule({
    imports: [
    ],
    declarations: [
        shortString
    ],
    exports: [
        shortString
    ],
    providers: [
    ]

})
export class SharedModule { }

将它添加到适合您的设置的模块中，我将所有管道都放在一个 SharedModule 中，所以这就是导出 SharedModule 的原因，但您可能将它放在 MainModule 或其他地方。