Можно ли использовать в коде пайп?

106

Когда я использую свой собственный канал в шаблоне, это выглядит так:

{{user|userName}}

И это хорошо работает.

Можно ли использовать в коде пайп?

Я пытаюсь использовать это так:

let name = `${user|userName}`;

Но это показывает

userName не определено

Мой альтернативный способ - использовать db.collection.findOne()в коде вручную. Но есть ли какой-нибудь умный способ?

angular angular-pipe Хунбо Мяо
источник
Вы не можете использовать такой шаблон, вы должны ввести трубу в свой конструктор
Йоанн Прот
извините, я поясню. Я уже колю трубы
Хунбо Мяо
Какой канал вы пытаетесь использовать в коде? Это твоя кастомная трубка?
Сива
1
Я не думаю, что вы можете это сделать, поскольку ...Angular не выполняет его. Это строковая интерполяция ES6 ...
Тьерри Темплиер
5
Посмотрим, поможет ли это stackoverflow.com/questions/35144821/…
Siva

Ответы:

115

Сначала объявите канал в providersсвоем модуле:

import { YourPipeComponentName } from 'your_component_path';

@NgModule({
  providers: [
    YourPipeComponentName
  ]
})
export class YourServiceModule {
}

Затем вы можете использовать @Pipeтакой компонент:

import { YourPipeComponentName } from 'your_component_path';

class YourService {

  constructor(private pipe: YourPipeComponentName) {}

  YourFunction(value) {
    this.pipe.transform(value, 'pipeFilter');
  }
}
saghar.fadaei
источник
1
Выглядит хорошо! Но по какой-то причине инъекция зависимостей не может внедрить мой канал в конструктор, хотя его можно без проблем использовать в html. Он объявлен и экспортируется в другом модуле, может быть, он тоже должен быть в списке поставщиков? Однако создание и использование нового экземпляра MyPipe действительно работает. Только у DI есть проблема ...
Сэм
19
@Sam Действительно, это должно быть в providers. Добавьте YouPipeComponentNameк себе, providersи этот метод будет работать отлично.
SrAxi
4
Также убедитесь, что вы добавили его к правильным поставщикам. Если вы хотите использовать канал глобально, поместите его в поставщики app.module. Если вы хотите использовать его только в некоторых лениво загружаемых модулях, поместите его в провайдеров соответствующих модулей
Фил
Неверный путь импорта. Труба будет доступна под @ angular / common
Андрис
@ Андрей Я редактировал это. Это была ошибка. Я имею в виду, что вы должны импортировать свой модуль трубы.
saghar.fadaei
107

@Siva прав. И спасибо!

Таким образом, способ использования канала в компоненте выглядит следующим образом:

let name = new UserNamePipe().transform(user);

Ссылка на другой похожий вопрос.

Хунбо Мяо
источник
3
Это работает, но, вероятно, не соответствует лучшим практикам / предпочтительным шаблонам Angular. Передача канала в конструктор в качестве зависимости компонента, как показано в другом ответе, «более правильно».
Джош
нет ли проблем с производительностью при использовании этого способа? некоторые люди могут использовать его постоянно!
Мохаммад Кермани,
2
Это совершенно неправильный способ использования труб. Трубы являются классами специального назначения и должны использоваться с помощью специальных средств, предоставляемых Angular. Если вам нужна какая-то функциональность, реализованная в конвейере, но с использованием ее как обычного класса TypeScript, вы должны создать этот regularкласс и использовать его в своем коде TS ( your-component.tsнапример). Если вам нужна такая же функциональность в конвейере, вы всегда можете использовать этот regularкласс и из канала.
Александр Абакумов
Самая большая разница в том, что таким образом вы создаете больше экземпляров класса. При использовании синтаксиса Angular он ведет себя как одиночный элемент и создается только один раз.
Sir2B