找不到管道“截断”

Posted 2023-03-13

【中文标题】找不到管道“截断”

【英文标题】：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:[]看看这个答案***.com/questions/39007130/…

能否请您出示您的 app.module.ts 文件？

【参考方案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 上使用管道的正常做法。