Angular2:为什么我收到“找不到管道"的提示?错误?

问题描述

我正在阅读Angular.io上的文档，并且正在这样做，我正在修改一个玩具项目，以修改自己所学的内容.我有一个带有元素的组件，该元素通过滑块发出的事件来调整大小.一切都很好.

I'm reading through the docs on Angular.io, and as I do so I'm modifying a toy project to tinker with what I'm learning. I have a component with an element that I am resizing via events emitted from sliders. This is all working fine.

我遇到了管道，并对其进行了测试开始输出我正在调整大小的盒子的尺寸.我可以在没有管道的情况下很好地输出尺寸(它们会按预期更新)，但是每当添加管道(例如DecimalPipe)时，都会出现以下错误:

I came across Pipes, and to test it out I started outputting the dimensions of the box I was resizing. I can output the dimensions fine without pipes (and they update as expected), but whenever I add a pipe (e.g. DecimalPipe), I get the following error:

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
...

我的代码如下.我想我已经包含了所有相关文件，但是如果还有其他有用的文件，请告诉我，我将其包含在内.

My code is below. I think I have included all of the relevant files, but if there is anything else that would be useful to see, let me know and I'll include it.

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

推荐答案

如果在 AppModule 中使用，则导入 BrowserModule ，在其他模块中，导入 CommonModule 使管道可用:

If used in AppModule import BrowserModule, in other modules import CommonModule to make the pipe available:

@NgModule({
   imports:         [
     MaterialModule,
     CommonModule
   ]

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

这篇关于Angular2:为什么我收到“找不到管道"的提示?错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！