找不到管道“截断”答案

【问题标题】：The pipe 'truncate' could not be found找不到管道“截断”
【发布时间】：2017-11-29 03:28:22
【问题描述】：

我对管道有点困惑，我知道有一些类似的问题，但我没有看到嵌套组件的问题我使用 Angular ^4.1.3 和 angular-seed 2 repo 当我使用根组件时它可以工作，但我需要在嵌套在主组件中的学生组件中使用它

├── src                        
│   └── client
│       ├── app
│       │   ├── app.component.e2e-spec.ts
│       │   ├── app.component.html
│       │   ├── app.component.spec.ts
│       │   ├── app.component.ts
│       │   ├── app.module.ts
│       │   ├── app.routes.ts
│       │   ├── home <---- it works here
|       |   |   ├── student <---but not here
│       │   │   |   ├── student.component.scss
|       |   │   │   ├── student.component.html
|       |   │   |   ├── student.component.ts
|       |   │   |   |── student.module.ts
|       |   |   ├── class
│       │   │   |   ├── class.component.scss
|       |   │   │   ├── class.component.html
|       |   │   |   ├── class.component.ts
│       │   │   ├── home.component.css
│       │   │   ├── home.component.html
│       │   │   ├── home.component.ts 
│       │   │   ├── home.module.ts
│       │   │   ├── home.routes.ts

我不知道我错过了什么，但我仍然收到消息 找不到管道“截断”

src/client/app/home/student/student.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StudentComponent } from './student.component';
import { TruncatePipe } from '../../truncate.pipe';


@NgModule({
  imports: [BrowserModule],
  declarations: [StudentComponent , TruncatePipe],
  exports: [StudentComponent ],
  providers: []
})
export class StudentModule { }

/src/client/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { APP_BASE_HREF } from '@angular/common';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AboutModule } from './about/about.module';
import { HomeModule } from './home/home.module';
import { SharedModule } from './shared/shared.module';
import { PipeModule } from './shared/pipes.module';

@NgModule({
  imports: [BrowserModule,
                    BrowserAnimationsModule,
                    HttpModule,
                    AppRoutingModule,
                    AboutModule,
                    HomeModule,
                    SharedModule.forRoot(),
                    PipeModule.forRoot() ],

  declarations: [AppComponent],
  providers: [{
    provide: APP_BASE_HREF,
    useValue: '<%= APP_BASE %>'
  }],
  bootstrap: [AppComponent]

})
export class AppModule { }

【问题讨论】：

你是在app.module.ts中导入的吗
感谢您的回复，是的，它已包含并在我的 app.module.ts 中声明......也在 student.module.ts 中不知道是否让它声明两次是正确的......在我的应用程序模块和学生模块..晚了我应该得到一个错误..但我只是测试知道为什么它不能识别管道
@YordanNikolov 管道不应进入 Providera。
很抱歉打错了，我想说exports:[]看看这个答案stackoverflow.com/questions/39007130/…
能否请您出示您的 app.module.ts 文件？

标签： angular

【解决方案1】：

我采用不同的方法解决了它，而不是在学生组件中运行管道，而是在具有 *ngFor 在

src/client/app/home/home.component.html

<app-student *ngFor="let s of students| truncate "></app-student>

src/client/app/truncate.pipe.ts

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

@Pipe({
    name: 'truncate'
})

export class TruncatePipe implements PipeTransform {
    transform(value: any): any {

        for(const item of value){
            if( item.name.length > 18){
                item.name = item.name.substring(0, 18) + '...';
            }
        }

        return value;
    }
}

src/client/app/home/home.module.ts

import { NgModule } from '@angular/core';
import { HomeComponent } from './home.component';
import { HomeRoutingModule } from './home-routing.module';
import { SharedModule } from '../shared/shared.module';
import { TruncatePipe } from '../truncate.pipe';

@NgModule({
  imports: [HomeRoutingModule, SharedModule],
  declarations: [HomeComponent, TruncatePipe],
  exports: [HomeComponent]
})
export class HomeModule { }

感谢您的所有建议它给了我一些想法，不幸的是，没有用，我仍然不知道为什么构建的管道不适用于学生组件

src/client/app/home/student/student.component.html

{{ 'this is a test' | uppercase }} <--- doesn't work

我知道这看起来很奇怪，但是按照教程 Angular 4 the complete guide 有一个完整的部分关于管道，看起来这是在 *ngFor 上使用管道的正常做法。

【讨论】：