Angular2：爲什麼我得到「Pipe not found」錯誤？

Question

我正在閱讀有關Angular.io的文檔，因爲我正在修改一個玩具項目來修補我正在學習的東西。我有一個元素，我通過從滑塊發出的事件調整大小的組件。這一切工作正常。

我碰到了Pipes，爲了測試它，我開始輸出我調整大小的框的尺寸。我可以輸出不細管的尺寸（和它們更新如預期），但每當我加管（例如DecimalPipe），我收到以下錯誤：

Unhandled Promise rejection: Template parse errors: 
The pipe 'number' could not be found ("{{[ERROR ->]width | number}}x{{height}} 
    <br /> 
    <md-slider (change)="doSizeChange('v',$event.value)" value"): SvgCanvasComponent@0:2 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError {__zone_symbol__error: Error: Template 
... 

我的代碼如下。我認爲我已經包含了所有相關文件，但是如果有其他任何有用的信息，請告訴我，我會將其包含在內。

app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { MaterialModule } from '@angular/material'; 
import 'hammerjs'; 

import { AppComponent } from './app.component'; 

import { NnpGuiModule } from './nnpGui/nnpGui.module'; 

@NgModule({ 
    imports:  [ 
    BrowserModule 
    ,MaterialModule.forRoot() 



,NnpGuiModule 
    ], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

app.component.ts

import { Component } from '@angular/core'; 

import {MdButton} from '@angular/material'; 

@Component({ 
    selector: 'my-app', 
    template: `<h1>NNP</h1> 
    <svgCanvasComponent [height]="400" [width]="600"></svgCanvasComponent> 
    <br /><button md-raised-button (click)="sayDoot()">DOOT</button> 
    `, 
}) 
export class AppComponent { 
    name: string; 
    inputVal: string; 

    constructor() { 
    this.name="doooooot"; 
    this.inputVal=""; 
    } 

    sayDoot(): void { 
    console.log('doot'); 
    } 
} 

nnpGui.module.ts

import { NgModule } from '@angular/core'; 
import { MaterialModule } from '@angular/material'; 
import { SvgCanvasComponent } from './svgCanvas.component'; 

@NgModule({ 
    imports:   [ 
    MaterialModule 
    ] 
    ,declarations: [SvgCanvasComponent] // what "belongs" to this module 
    ,exports:   [SvgCanvasComponent] // what exports to public from this module 
}) 
export class NnpGuiModule { 
} 

svgCanvas.component.ts

import { Component, Input, ViewEncapsulation } from '@angular/core'; 
import {MdButton} from '@angular/material'; 

@Component({ 
    selector: 'svgCanvasComponent', 
    template: `{{width | number:'3.1-5'}}x{{height | number:'3.1-5'}} 
    <br /> 
    <md-slider (change)="doSizeChange('v',$event.value)" value="100"></md-slider> 
    <md-slider (change)="doSizeChange('h',$event.value)" value="100"></md-slider> 
    <button md-button (click)="doResetSize()">Reset</button> 
    <br /> 

    <svg 
     id="svgEl" 
     style="border: 3px solid black" 
     id="logo" 
     [attr.width]="width" [attr.height]="height" viewBox="0 0 600 400" 
     (click)="doClick($event)" 
    ></svg> 
    `, 
    //encapsulation: ViewEncapsulation.Native // None/Native/Emulated 
}) 
export class SvgCanvasComponent { 
    @Input() width : number; 
    @Input() height: number; 

    initialHeight: number; 
    initialWidth: number; 

    constructor() { 
     [this.initialWidth, this.initialHeight] = [600, 400]; 
     [this.width, this.height] = [this.initialWidth, this.initialHeight]; 
    } 

    doClick(e:MouseEvent) { 
     console.log('SvgCanvasComponent clicked'); 
     console.log(e); 
    } 

    doResetSize() { 
     [this.height, this.width] = [this.initialHeight, this.initialWidth]; 
    } 
    doSizeChange(dir:string, pct:number) { 
     console.log(`doSizeChange: ${dir}; ${pct}`); 

     switch (dir) { 
      case 'h': this.height=pct/100.0 * this.initialHeight; break; 
      case 'v': this.width =pct/100.0 * this.initialWidth ; break; 
     } 
    } 
} 

Answer 1

如果AppModule進口BrowserModule使用，在其他模塊導入CommonModule，藉此讓該管：

@NgModule({ 
    imports:   [ 
    MaterialModule, 
    CommonModule 
    ] 

https://angular.io/docs/ts/latest/api/common/index/CommonModule-class.html