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

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

{{user|userName}}

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

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

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

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

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

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

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


angular angular-pipe
person Hongbo Miao    schedule 02.02.2016    source источник
comment
Вы не можете использовать такой шаблон, вы должны ввести трубу в свой конструктор.   -  person Yoann Prot    schedule 02.02.2016
comment
извините, я поясню. Я уже закачиваю трубы   -  person Hongbo Miao    schedule 02.02.2016
comment
Какую трубу вы пытаетесь использовать в коде? Это твоя кастомная трубка?   -  person Siva    schedule 02.02.2016
comment
@Siva да, это моя кастомная трубка.   -  person Hongbo Miao    schedule 02.02.2016
comment
Я не думаю, что это возможно, поскольку ... не выполняется Angular. Это строковая интерполяция ES6 ...   -  person Thierry Templier    schedule 02.02.2016
comment
Посмотрите, помогает ли это stackoverflow.com/questions/ 35144821 /   -  person Siva    schedule 02.02.2016
comment
@Siva вау, работает! большое спасибо!   -  person Hongbo Miao    schedule 02.02.2016
comment
Возможный дубликат Angular - использование каналов в службах и компонентах   -  person Mick    schedule 18.02.2019

Ответы (2)


arrow_upward
132
arrow_downward

Сначала объявите канал в 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');
  }
}
person saghar.fadaei    schedule 02.11.2016
comment
Выглядит хорошо! Но по какой-то причине инъекция зависимостей не может вставить мой канал в конструктор, хотя его можно без проблем использовать в html. Он объявлен и экспортируется в другом модуле, может быть, он тоже должен быть в списке провайдеров? Однако создание и использование нового экземпляра MyPipe действительно работает. Только у DI есть проблема ... - person Sam; 28.03.2017
comment
@Sam Действительно, это должно быть в providers. Добавьте YouPipeComponentName в свой providers, и этот метод будет работать идеально. - person SrAxi; 10.04.2017
comment
Также убедитесь, что вы добавили его к правильным поставщикам. Если вы хотите использовать канал глобально, поместите его в провайдеры app.module. Если вы хотите использовать его только в некоторых лениво загружаемых модулях, поместите его в провайдеры соответствующих модулей. - person Phil; 12.02.2018
comment
Неправильный путь импорта. Труба доступна под @ angular / common - person Andris; 27.06.2019
comment
@ Андрей Я редактировал это. Это была ошибка. Я имею в виду, что вы должны импортировать свой модуль трубы. - person saghar.fadaei; 10.07.2019

arrow_upward
114
arrow_downward

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

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

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

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

person Hongbo Miao    schedule 02.02.2016
comment
Это работает, но, вероятно, не соответствует лучшим практикам / предпочтительным шаблонам Angular. Передача канала в конструктор в качестве зависимости компонента, как показано в другом ответе, более правильная. - person Josh; 13.11.2018
comment
нет ли проблем с производительностью при использовании этого способа? некоторые люди могут использовать его постоянно! - person Mohammad Kermani; 12.05.2019
comment
Это совершенно неправильный способ использования труб. Каналы - это классы специального назначения, и их следует использовать с помощью специальных средств, предоставляемых Angular. Если вам нужна какая-то функциональность, реализованная в конвейере, но с использованием ее как обычного класса TypeScript, вы должны создать этот класс regular и использовать его в своем коде TS (например, your-component.ts). Если вам нужна такая же функциональность в конвейере, вы всегда можете использовать этот класс regular из канала. - person Alexander Abakumov; 24.06.2019
comment
Самая большая разница в том, что таким образом вы создаете больше экземпляров класса. При использовании синтаксиса Angular он ведет себя как одиночный элемент и создается только один раз. - person Sir2B; 24.03.2020