Angular2：在组件上找不到管道装饰器

debugcn 发表于 Dev

白兰度

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

zone.js：461未处理的承诺拒绝：在RoomDetailWidgetComponent上找不到管道装饰器；区域：角；任务：Promise.then; 值：BaseException {消息：“在RoomDetailWidgetComponent上找不到管道装饰器”，堆栈：“错误：在RoomDetailWidget ... / @ angular / compiler / src / runtime_compiler.js：66：49）上找不到管道装饰器”}消息：“没有管道在RoomDetailWidgetComponent上找到装饰器”堆栈：“错误：在新的BaseException（http：// localhost：5000/lib/@angular/compiler/src/facade/exceptions.js：17：23）上，在RoomDetailWidgetComponent↵上找不到管道装饰器PipeResolver.resolve（http：// localhost：5000/lib/@angular/compiler/src/pipe_resolver.js：29：15）↵在CompileMetadataResolver.getPipeMetadata（http：// localhost：）↵在eval（http：// localhost：5000/lib/@angular/compiler/src/metadata_resolver.js：173：57）↵在Array.map（native）↵在CompileMetadataResolver.getViewPipesMetadata（http：// localhost： 5000/lib/@angular/compiler/src/metadata_resolver.js：173：22）↵在eval（http：// localhost：5000/lib/@angular/compiler/src/runtime_compiler.js：80：58）↵ Array.forEach（native）↵在RuntimeCompiler._compileComponent（http：// localhost：5000/lib/@angular/compiler/src/runtime_compiler.js：76：36）↵在eval（http：// localhost：5000 / lib /@angular/compiler/src/runtime_compiler.js:66:49）“原型：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

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

    }

    

}

如您所见，我在组件中声明了管道。路径都还可以。无法解决该问题。

白兰度

事实证明，这是一个“愚蠢”的错误。

我在父组件中意外地将有问题的组件引用为管道，而不是指令，如下所示：

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() {

    }
    
    
}

希望这将有助于避免其他人头痛。容易犯的错误...

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。