Angular2：組件上找不到管道裝飾器

Question

我在我的Angular 2.0-rc1應用程序中使用了一些非常標準的自定義管道。一切都很好，直到我將管道移至新文件夾。現在我越來越：

zone.js:461 Unhandled Promise rejection: No Pipe decorator found on RoomDetailWidgetComponent ; Zone: angular ; Task: Promise.then ; Value: BaseException {message: "No Pipe decorator found on RoomDetailWidgetComponent", stack: "Error: No Pipe decorator found on RoomDetailWidget…/@angular/compiler/src/runtime_compiler.js:66:49)"}message: "No Pipe decorator found on RoomDetailWidgetComponent"stack: "Error: No Pipe decorator found on RoomDetailWidgetComponent↵ at new BaseException (http://localhost:5000/lib/@angular/compiler/src/facade/exceptions.js:17:23)↵ at PipeResolver.resolve (http://localhost:5000/lib/@angular/compiler/src/pipe_resolver.js:29:15)↵ at CompileMetadataResolver.getPipeMetadata (http://localhost:5000/lib/@angular/compiler/src/metadata_resolver.js:142:47)↵ at eval (http://localhost:5000/lib/@angular/compiler/src/metadata_resolver.js:173:57)↵ at Array.map (native)↵ at CompileMetadataResolver.getViewPipesMetadata (http://localhost:5000/lib/@angular/compiler/src/metadata_resolver.js:173:22)↵ at eval (http://localhost:5000/lib/@angular/compiler/src/runtime_compiler.js:80:58)↵ at Array.forEach (native)↵ at RuntimeCompiler._compileComponent (http://localhost:5000/lib/@angular/compiler/src/runtime_compiler.js:76:36)↵ at eval (http://localhost:5000/lib/@angular/compiler/src/runtime_compiler.js:66:49)"proto: ErrorconsoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426 zone.js:463 Error: Uncaught (in promise): No Pipe decorator found on RoomDetailWidgetComponent(…)consoleError @ zone.js:463_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426

import { Component, AfterViewInit, Input, SimpleChange, Output, EventEmitter } from "@angular/core"; 
 
import { IPropertyRoom } from "./../../shared/propertyData"; 
 
import { FirstHalfPipe } from "./../../shared/pipes/first-half.pipe"; 
 
import { SecondHalfPipe } from "./../../shared/pipes/second-half.pipe"; 
 

 
export interface IRoomData { 
 
    roomId: number; 
 
    isFeatured: boolean; 
 
    roomName: string; 
 
    featurePicSrc: string; 
 
    description: string; 
 
    amenities: string[]; 
 
} 
 

 
@Component({ 
 
    selector: "room-detail-widget", 
 
    templateUrl: "app/mobile/roomDetailWidget/room-detail-widget.html", 
 
    directives: [], 
 
    pipes: [FirstHalfPipe,SecondHalfPipe] 
 
}) 
 
export class RoomDetailWidgetComponent { 
 
    @Input() roomDetail: IRoomData; 
 
    @Output() onRoomTabClick = new EventEmitter(); 
 

 
    constructor() { 
 

 
    } 
 

 
    ngOnChanges(changes: { [propName: string]: SimpleChange }) { 
 
     this.roomDetail = changes["roomDetail"].currentValue; 
 

 
    } 
 
    roomClick() { 
 
     this.onRoomTabClick.emit(this.roomDetail.roomId); 
 

 
    } 
 

 
    
 

 
}

正如你所看到的，我在我的組件聲明管道。路徑一切正常。無法弄清楚如何解決這個問題。

Answer 1

事實證明這是一個「愚蠢」的錯誤。

我無意中提到的違規成分爲管道，而不是一個指令，在父組件，如下所示：

import { RoomDetailWidgetComponent, IRoomData } from "./../roomDetailWidget/room-detail-widget.component" 
 

 
@Component({ 
 
    directives: [], 
 
    selector: "parent", 
 
    templateUrl: "path/parent.html", 
 
    pipes: [RoomDetailWidgetComponent] //Duh, big FAIL 
 
}) 
 
export class ParentComponent { 
 
    
 

 
    constructor() { 
 

 
    } 
 
    
 
    
 
}

希望這將有助於避免頭痛爲別人。容易犯的錯誤...

Answer 2

管道不支持繼承。這只是一個猜測，但我記得看到擴展另一個類的管道會導致這個錯誤。 https://github.com/angular/angular/issues/8694

Answer 3

看來Angular2可以找到管道的元數據。

當您添加Pipe修飾符時，會添加以下內容。

[PipeMetadata] 
    0: PipeMetadata 
    _pure: undefined 
    name: "some" 
    pure: (...) 
    __proto__: InjectableMetadata 
    length:1 
    __proto__: Array[0] 

看到這個plunkr：https://plnkr.co/edit/d0gXbGm3mus1cQLE1wgB?p=preview。

也許你的路徑包含管道是不正確的讓你的進口管道是空的模塊...