Question

我对管道有点困惑，我知道有一些类似的问题，但是我没有看到嵌套组件的问题我正在使用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

我不知道我错过了什么，但我仍然收到了消息 无法找到管道'truncate'

的src /客户端/应用程序/家庭/学生/ 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 { }

Answer 1

我解决了它采用不同的方法，而不是在学生组件中运行管道我在家庭组件中做了它在的

<强>的src /客户端/应用程序/家庭/ home.component.html

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

<强>的src /客户端/应用程序/ 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 /客户端/应用程序/家庭/ 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 /客户端/应用程序/家庭/学生/ student.component.html

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

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

无法找到管道'truncate'

1 个答案: