Question

我在Angular 2.0-rc1应用程序中使用了一些非常标准的自定义管道。一切顺利，直到我将管道移动到新文件夹。现在我得到了：

zone.js：461未处理的承诺拒绝：在RoomDetailWidgetComponent上找不到管道装饰器;区域：角;任务：Promise.then;值：BaseException {message：＆＃34;在RoomDetailWidgetComponent＆＃34;上找不到管道装饰器;堆栈：＆＃34;错误：在RoomDetailWidget ... / @ angular/compiler/src/runtime_compiler.js上找不到管道装饰器：66：49 ）＆＃34;}消息：＆＃34;在RoomDetailWidgetComponent＆＃34;堆栈上没有找到管道装饰器：＆＃34;错误：在PipeResolver的新BaseException（http://localhost:5000/lib/@angular/compiler/src/facade/exceptions.js:17:23）处找不到RoomDetailWidgetComponent↵上的管道装饰器。在CompileMetadataResolver.getViewMetadata（{{3 ↵在eval（http://localhost:5000/lib/@angular/compiler/src/pipe_resolver.js:29:15）↵在Array.forEach（native）↵在RuntimeCompiler._compileComponent（http://localhost:5000/lib/@angular/compiler/src/metadata_resolver.js:142:47）↵在eval（http://localhost:5000/lib/@angular/compiler/src/metadata_resolver.js:173:57）＆＃34; proto ：ErrorconsoleError @ zone.js：461_loop_1 @ zone.js：490drainMicroTaskQueue @ zone.js：494ZoneTask.invoke @ zone.js：426 zone.js：463错误：未捕获（在承诺中）：在RoomDetailWidgetComponent（...）上找不到管道装饰器consoleError @ zone.js：463_loop_1 @ zone.js：490drainMicroTaskQueue @ zone.js：494ZoneTask.invoke @ zone.js：426 < / p>

＆＃13;

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);

    }

    

}

＆＃13;

正如您所看到的，我正在声明组件中的管道。路径都没问题。无法弄清楚如何解决这个问题。

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。

也许您的包含管道的模块的路径不正确，因此导入的管道为空...

Angular2：在组件

3 个答案: