Question

我正在尝试创建一个Pipe来缩短文本。我正在使用Angular

以下是SummaryPipe代码，它将缩短代码。

＆＃13;

import { Pipe, PipeTransform } from '@angular/core';

@Pipe:({
	name:'summary',
})

export class SummaryPipe implements PipeTransform {
	transform(value: string, limit?: number){
		if(!value)
			return null;

		let actualLimit=(limit)?limit:50;
		return value.substr(0,actualLimit)+"...";

    } 
}

＆＃13;

在App.module.ts中，我已导入管道并添加到声明

＆＃13;

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule} from '@angular/forms'
import { SummaryPipe } from './summary.pipe';
import { AppComponent } from './app.component';
import { CoursesComponent } from './courses/courses.component'; 
import { CourseComponent } from './course.component'; 
import { CourseService } from './course.service';


@NgModule({
  declarations: [
    AppComponent,
    CoursesComponent, CourseComponent  , SummaryPipe
  ],
  imports: [
    BrowserModule,FormsModule
  ],
  providers: [CourseService],
  bootstrap: [AppComponent]
})
export class AppModule { }

＆＃13;

在course.component.ts

中使用Pipe

＆＃13;

import {CourseService} from './course.service';
import {Component} from '@angular/core';
@Component({
	selector:'courses',
	template :` 
		{{text }}
		`

}) 


export class CourseComponent 
{
	title="Packages";
	 
	text=`THis is the best typing test which. Was gonna be conducted`
	 
	 
}

＆＃13;

在App.component.html中查看

＆＃13;

<div class="container">
<div style="text-align:center">
  <h1>
  {{ title }}!
  </h1>
</div>
<h1></h1>
<courses></courses>
</div>

＆＃13;

问题是当我使用

编译代码时

ng serve

＆＃13;

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-02-10T07:01:42.148Z
Hash: e3fc4a865fd54c278132
Time: 12120ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 2.93 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 636 bytes [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 1.1 MB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 853 kB [initial] [rendered]

ERROR in src/app/summary.pipe.ts(3,6): error TS1146: Declaration expected.


webpack: Failed to compile.
webpack: Compiling...
 33% building modules 17/36 modules 19 active ...de_modules\rxjs\_esm5\operator\map.jsERROR in src/app/summary.pipe.ts(3,6): error TS1146: Declaration expected.
                                  Date: 2018-02-10T07:03:35.931Z - Hash: 7220349b3ba903b1c21f - Time: 12307ms
2 unchanged chunks
chunk {main} main.bundle.js (main) 35 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 553 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 8.22 MB [initial] [rendered]

webpack: Compiled successfully.
webpack: Compiling...
 10% building modules 0/1 modules 1 active ...\angutestpro\my-dream-app\src\main.tsERROR in src/app/summary.pipe.ts(3,6): error TS1146: Declaration expected.
                                     Date: 2018-02-10T07:03:36.971Z - Hash: 27ddb76964e11a5cbf06 - Time: 705ms
5 unchanged chunks

webpack: Compiled successfully.

＆＃13;

它提供了预期的错误声明

跑步 ng -v以下是版本详细信息

＆＃13;

  _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.6.8
Node: 6.11.3
OS: win32 x64
Angular: 5.2.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.8
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.8
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0

＆＃13;

Answer 1

不要将:写在预期装饰器声明的地方

@Pipe:({
    ^^^

声明预期在Angular中的SummaryPipe

1 个答案: