Не удается создать экземпляр DatePipe

Я пытаюсь создать экземпляр объекта DatePipe в своем приложении Angular2, чтобы использовать функцию transform(...) в разрабатываемом мною компоненте.

// ...
import { DatePipe } from '@angular/common';

@Component({...})
export class PanelComponent implements OnInit {
    // ...
    datePipe: DatePipe = new DatePipe(); // Error thrown here
    // ...
}

Этот сегмент кода отлично работал в RC5. Теперь я пытаюсь перейти на финальную версию Angular2 и получаю эту ошибку при запуске ng serve или ng build,

~/tmp/broccoli_type_script_compiler-input_base_path-XitPWaey.tmp/0/src/app/panel/panel.component.ts (33, 24): 
Supplied parameters do not match any signature of call target.

Как я могу решить эту проблему? Есть ли другой способ создания экземпляра Pipe? Или Angular перестал поддерживать создание экземпляров Pipes внутри компонентов?


angular angular2-pipe
person charith.arumapperuma    schedule 21.09.2016    source источник
comment
Вы просто неправильно используете трубу. Вы не должны вручную создавать экземпляр канала, вместо этого используйте DI.   -  person Harry Ninh    schedule 21.09.2016

Ответы (2)


arrow_upward
26
arrow_downward

Если вы посмотрите исходный код, то увидите, что конструктор DatePipe запрашивает обязательный параметр:

constructor(@Inject(LOCALE_ID) private _locale: string) {}

Для DataPipe нет локали по умолчанию.

https://github.com/angular/angular/blob/2.0.0/modules/%40angular/common/src/pipes/date_pipe.ts#L97

Вот почему typescript дает ошибку. Таким образом, вы должны инициировать свою переменную, как показано ниже:

datePipeEn: DatePipe = new DatePipe('en-US')
datePipeFr: DatePipe = new DatePipe('fr-FR')
constructor() {
  console.log(this.datePipeEn.transform(new Date(), 'dd MMMM')); // 21 September
  console.log(this.datePipeFr.transform(new Date(), 'dd MMMM')); // 21 septembre
}

Надеюсь, это поможет вам!

person yurzui    schedule 21.09.2016
comment
Спасибо. Это решает мою проблему. Судя по всему, этот новый конструктор представлен в Angular2 RC6. Я пропустил это с тех пор, как обновлялся с RC5 до финальной версии. Запрос на извлечение — fix(i18n) : Валюта/Дата/Число конвейера используют внедренную локаль - person charith.arumapperuma; 21.09.2016

arrow_upward
0
arrow_downward

выглядит все нормально, ошибка должна быть где-то еще в вашем коде. См. мой плункер: https://plnkr.co/edit/koDu6YmB131E6sXc6rKg?p=preview

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {DatePipe} from '@angular/common';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {

  dPipe = new DatePipe();

  constructor() {
    this.name = 'Angular2'
    console.dir(this.dPipe);
    console.log(this.dPipe.transform(new Date(), 'dd.MM'));
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

И @Harry Ninh .. вы не можете вводить Пайпс !!

person slaesh    schedule 21.09.2016
comment
Я считаю, что plunker все еще использует более старую версию Angular2. После ответа @yurzui я проверил историю класса DatePipe и обнаружил, что новый конструктор представлен в RC6 этим запросом на вытягивание. fix(i18n): канал Валюта/Дата/Число использует внедренную локаль - person charith.arumapperuma; 21.09.2016
comment
Как указывает этот ответ, вы можете вводить каналы Angular, включая DatePipe. Я создал пример Plunkr внедрения зависимостей с помощью DatePipe для справки. - person jmmygoggle; 15.03.2018