标签: angular2-pipe

我已经创建了客户摘要管道类，它工作正常，但我想在子字符串的末尾添加阅读更多链接.. 单击显示的所有内容时。

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'summary' })
export class SummaryPipe implements PipeTransform {
    transform(value: string, maxWords: number) {
        if (value)
            return value.substring(0, maxWords) +"... <a href='#' (click)='getAllText()'>Read more</a>";
    }
       getAllText() {
        //return this.value; ?
    }
}

我需要填写我知道的 fucn 但我需要问什么是更有效和更真实的方法来实现这一点？

情况:

我只需要在一个组件中使用管道.出于这个原因,我不想全局导入它,而只是在组件中导入它.

我试过寻找如何做的参考,但找不到它.

这是我的尝试:

管道:

当全球测试工作正常

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

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
    transform(value, args:string[]) : any 
    {
        let keys = [];      
        for (let key in value) 
        {
            keys.push({key: key, value: value[key]});
        }
        return keys;
    }
}

组件:

import { Component, NgModule } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import {CommonModule} from "@angular/common";

import { KeysPipe } from './keys.pipe';


@Component({
  selector: 'page-attendees',
  templateUrl: 'attendees.html'
})

@NgModule({
  declarations: [ …

我有一个表格，我使用自定义管道成功过滤了它。过滤器基于两个输入，它们共同构成一个表单。我要添加的功能是在单击提交按钮之前不会进行过滤。所以它更像是一个搜索按钮。我发现了大量有关管道的信息，但没有关于在单击按钮时激活它们的信息。

主页.component.html：

<div>
  <label>Start Date:</label>
  <input type="text" [(ngModel)]="startDateValue">
</div>
  <label>End Date:</label>
  <input type="text" [(ngModel)]="endDateValue">
</div>
//'let idx=index' and 'let even=even' are used to change color of the rows but I took out that code. The 'onClick' function just takes the row and uses an EventEmitter to output it.
<tr *ngFor="let dPoint of theData | searchDates:startDateValue:endDateValue; let idx=index; let even=even;" (click)="onClick(dPoint, idx)">
  <td>{{dPoint.tDataPoint}}</td>
  <td>{{dPoint.tICCP}}</td>
  <td>{{dPoint.tStartDate}}</td>
  <td>{{dPoint.tEndDate}}</td>
</tr>
//the button that will execute the filtering
<button type="submit" class="btn icon-search" [disabled]="!secondForm.valid" (click)="submit(secondForm.value)"></button>

mainpage.component.ts: …

我现在有: <span>{{(price | currency: 'EUR': true)}}</span>

并以标准格式1,000.00输出

但我需要这种格式1.000,00

我正在尝试重用 Angular Common 中的现有货币管道。目标是当值取整时截断 .00。为此我写了这段代码：

/** Transform currency string and round it.  */
@Pipe({name: 'customCurrency'})
export class CustomCurrencyPipe extends CurrencyPipe implements PipeTransform {
  transform(value: number|string|null|undefined): string|null {
    if (!isValue(value)) return null;
    const valueFormat = (+value % 1 === 0) ? '1.0-0' : '1.2-2';
    return super.transform(value, 'USD', 'symbol', valueFormat);
  }
}

function isValue(value: number|string|null|undefined): value is number|string {
  return !(value == null || value === '' || value !== value);
}

如果我将转换类型设置为：any 它运行没有问题。但是我不允许在当前环境中使用任何内容。如果我将其设置为 :string|null 我会收到此错误：

TS2416: Property 'transform' in type 'CustomCurrencyPipe' …

在学习过程中，我遇到了自定义管道的创建，所以我认为这会有所帮助。

我正在Angular 2中创建一个表组件,我在其中创建一个公共表搜索过滤器管道,它正常工作,但没有在适当的列中显示值.当我开始在文本框中键入搜索键时,过滤后的值会正确显示,但不会显示在相应的列下.很抱歉,如果这个问题是重复的,我已经花了足够的时间搜索网页,但我无法得到解决方案.

以下是供您参考的代码

component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public tableData: any = [
     {"Name":"Gaurav","Address":"Chennai","Contact":"9632587410"},
     {"Name":"Rakesh","Address":"Goa","Contact":"852397410"}
  ];
}

Pipe.ts

@Pipe({
  name: 'searchPipe'
})
export class searchPipe implements PipeTransform {
   transform(value: any, args: string[]): any {
      let filter = args[0];

      if (filter && Array.isArray(value)) {
         let filterKeys = Object.keys(filter);
         return value.filter(item =>
            filterKeys.reduce((key, keyName) =>
               key && item[keyName].toUpperCase() === filter[keyName].toUpperCase(), true));
      } else {
         return value;
      }
   } …

假设我有一个Event集合：

export class Event {
  startingTime: Date
}

我想从最接近今天的位置开始显示它们，那OrderByUpcomingToLatestPipe会是什么样子？

<event-element *ngFor="let event of events | orderByUpcomingToLatest"></event-element>

编辑：

当离今天最近的日期是第一个，离今天最远的日期是最后一个时，我希望数组按降序排列（已经过去的日期将以相同的方式排在最远的日期之后）

这是我的第一个angualr项目.我正在更新元素点击的输入值.我希望在更改此值时触发过滤管道.触发管道的逻辑是指令.这可能吗？

零件

<input id="filter-careers" placeholder="type your title here" type="text" [(ngModel)]="term" value="">

 <div class="vacancy {{vacancy.department}}" *ngFor="let vacancy of vacancies | filter:term"
       (click)="openModalContent(vacancy.description, vacancy.positionTitle, vacancy.department, vacancy.link)">
      <p>{{vacancy.positionTitle }}</p>
  </div>

第二部分

<div class="department" *ngFor="let department of departments" appDepartmentsDirective [departmentName]="department.name" >

      <div class="icon" [ngStyle]="{background: 'url(' + '../../assets/' + department.link + '.png' + ') center center no-repeat'}">
        <img src="../../assets/{{department.link}}.svg" />
      </div>
    </div>

指示

import { Directive, HostListener, Input  } from '@angular/core';

@Directive({
  selector: '[appDepartmentsDirective]'
})

export class DepartmentsDirectiveDirective {

  @Input() departmentName:string;

  constructor() { }



  @HostListener('click') …

建议在根AppModule提供程序数组中注册服务,并避免使用根AppComponent的提供程序数组.什么时候应该有人在根AppComponent中注册服务？任何实际的例子.与根AppComponent相比,在根AppModule中注册服务有什么好处？