Angular2：为什么我得到＆＃34;找不到管道＆＃34;错误？

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