标签: angular2-pipe

我知道我可以这样称呼管道:

{{ myData | date:'fullDate' }}

这里的日期管道只有一个参数.从组件的模板HTML和直接在代码中调用具有更多参数的管道的语法是什么？

我似乎无法修复此错误.我有一个搜索栏和一个ngFor.我试图使用这样的自定义管道过滤数组:

import { Pipe, PipeTransform } from '@angular/core';

import { User } from '../user/user';

@Pipe({
  name: 'usersPipe',
  pure: false
})
export class UsersPipe implements PipeTransform {
  transform(users: User [], searchTerm: string) {
    return users.filter(user => user.name.indexOf(searchTerm) !== -1);
  }
}

用法:

<input [(ngModel)]="searchTerm" type="text" placeholder="Search users">

<div *ngFor="let user of (users | usersPipe:searchTerm)">
...
</div>

错误:

zone.js:478 Unhandled Promise rejection: Template parse errors:
The pipe 'usersPipe' could not be found ("
<div class="row">
    <div  
    [ERROR ->]*ngFor="let user of (user | …

内置管道是工作,但我想使用的所有自定义管道都是相同的错误:

无法找到管道'actStatusPipe'

[错误 - >] {{data.actStatus | actStatusPipe}}

我尝试了两种方法,在app.module的声明中声明它:

app.module.ts:

import {ActStatusPipe} from '../pipe/actPipe'

@NgModule({
    declarations: [
        AppComponent,
        HomePage,
        ActivitiesList,
        ActStatusPipe
    ],
    ...
})

或者使用其他模块来声明和导出我的所有管道:// pipe

import {ActStatusPipe} from "./actPipe"

@NgModule({
    declarations:[ActStatusPipe],
    imports:[CommonModule],
    exports:[ActStatusPipe]
})

export class MainPipe{}

并在app.module中导入它.

//pipe
import {MainPipe} from '../pipe/pipe.module'

@NgModule({
    declarations:[...],
    imports:[...,MainPipe],
})

但它们都不适用于我的应用程序.

这是我的管道代码:

import {Pipe,PipeTransform} from "@angular/core";

@Pipe({
    name:'actStatusPipe'
})
export class ActStatusPipe implements PipeTransform{
    transform(status:any):any{
        switch (status) {
            case 1:
                return "UN_PUBLISH";
            case 2:
                return "PUBLISH";
            default:
                return status
        }
    }
} …

在Angular 2中是否可以在条件下应用管道？我想做的事情如下:

{{ variable.text | (variable.value ? SomePipe : OtherPipe) }}

如果没有,实现这种效果的首选方法是什么？

目前我重写提供者使用这样的模拟服务:

beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    tcb.overrideProviders(AddFieldToObjectDropdownComponent,
        [
             provide(ServiceA, { useClass: MockServiceA })),
             provide(ServiceB, { useClass: MockServiceB }))
        ])...

我想对组件使用的管道做同样的事情.我试过了,provide(PipeA, { useClass: MockPipeA })和provide(PipeA, { useValue: new MockPipeA() })但都没有奏效.

我正在进行角度2最终版本.

我已经宣布了两个模块:主应用程序和一个用于设置页面.

该主模块被宣布全球管道.该模块还包括设置模块.

app.module.ts

@NgModule({
    imports: [BrowserModule, HttpModule, routing, FormsModule, SettingsModule],
    declarations: [AppComponent, JsonStringifyPipe],
    bootstrap: [AppComponent]
})
export class AppModule { }

settings.module.ts

@NgModule({
    imports: [CommonModule, HttpModule, FormsModule, routing],
    declarations: [SettingsComponent],
    exports: [SettingsComponent],
    providers: []
})
export class SettingsModule { }

当尝试在设置模块中使用管道时,我收到一条错误,指出无法找到管道.

zone.min.js?cb=bdf3d3f:1 Unhandled Promise rejection: Template parse errors:
The pipe 'jsonStringify' could not be found ("         <td>{{user.name}}</td>
                    <td>{{user.email}}</td>
                    <td>[ERROR ->]{{user | jsonStringify}}</td>
                    <td>{{ user.registered }}</td>
                </tr"): ManageSettingsComponent@44:24 ; …

我有纯管道TranslatePipe,使用LocaleService具有locale$: Observable<string>当前区域设置的短语进行翻译.我也ChangeDetectionStrategy.OnPush启用了所有组件,包括AppComponent.现在,当有人更改语言时,如何重新加载整个应用程序？(在locale$observable中发出新值).

目前,我location.reload()在用户在语言之间切换后使用.这很烦人,因为整个页面都重新加载.如何使用纯管道和OnPush检测策略进行这种角度方式？

我正在尝试创建一个组件,您可以在其中传递应该用于组件内的列表的管道.从我通过测试和寻找答案找到的,唯一的解决方案似乎创建类似于:

<my-component myFilter="sortByProperty"></my-component>

my-component 模板:

<li *ngFor="#item of list | getPipe:myFilter"></li>

然后映射myFilter到正确的管道逻辑并运行它,但这看起来有点脏,不是最佳的.

我认为他们会提出一个更好的解决方案来解决这个问题,因为Angular 1你也会沿着这些方向做一些事情.

在Angular 2中没有更好的方法吗？

我正在制作一个Angular项目,用户可以在其中切换语言.是否可以使语言环境动态化？

我已经看到你可以在NgModule中添加它,但我猜它放在那里时不是动态的吗？或者我可以通过某种服务或某种方式改变它吗？

我在angular2中创建一个管道,我想在白色空间中分割字符串,然后将其作为数组读取.

let stringToSplit = "abc def ghi";
StringToSplit.split(" ");
console.log(stringToSplit[0]);

当我记录这个时,我总是得到"a"作为输出.我哪里错了？