Чи можна використовувати в коді трубу?


103

Коли я використовую свою власну трубу в шаблоні, вона виглядає так:

{{user|userName}}

І це добре працює.

Чи можна використовувати в коді трубу?

Я намагаюся використовувати це так:

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

Але це показує

userName не визначено

Мій альтернативний спосіб - це використання db.collection.findOne()коду вручну. Але чи є розумний спосіб?


Ви не можете використовувати такий шаблон, як ви повинні ввести трубу в свій кондуктор
Yoann Prot

вибачте, я дам зрозуміти. Я вже впорскую труби
Hongbo Miao

Яку трубу ви намагаєтеся використовувати в коді? Це ваша спеціальна труба?
Сіва

1
Я не думаю, що ви можете, оскільки ...це не виконується Angular. Це інтерполяція рядків ES6 ...
Тьєррі Темплієр

5
Подивіться, чи це допомагає stackoverflow.com/questions/35144821/…
Сіва

Відповіді:


112

Спочатку оголосіть трубу у 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');
  }
}

1
Виглядає добре! Але з якоїсь причини введення залежності не може ввести мою трубу в конструктор, навіть якщо вона може бути використана в html без проблем. Він задекларований та експортований в інший модуль, можливо, він також повинен бути в списку постачальників? Створення та використання нового екземпляра MyPipe дійсно працює. Тільки у DI є проблема ...
Сем,

19
@Sam Дійсно це потрібно бути в providers. Додайте YouPipeComponentNameдо свого, providersі цей метод спрацює чудово.
SrAxi

4
Також переконайтеся, що ви додали їх до потрібних постачальників. Якщо ви хочете використовувати трубу в усьому світі, поставте її в провайдер app.module. Якщо ви хочете використовувати його лише в деяких ліниво завантажених модулях, покладіть їх у своїх постачальників відповідних модулів
Phil

Неправильний шлях імпорту. Труба не буде доступна під @
Андріс

@Andris Я це відредагував. Це була помилка. Я маю на увазі, що ти повинен імпортувати свій трубовий модуль.
saghar.fadaei

107

@Siva вірна. І дякую!

Тож спосіб використання труби в компоненті такий:

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

Посилання на інше подібне питання.


3
Це працює, але це, мабуть, не дотримується кращих угод та бажаних зразків. Подача труби в конструктор як складова залежність, як показано в іншій відповіді, "правильніше".
Джош

чи не існує жодної проблеми з продуктивністю, що використовується цим способом? деякі люди можуть використовувати це постійно!
Мохаммад Кермані

2
Це абсолютно неправильний спосіб використання труб. Труби є класами спеціального призначення і повинні використовуватися за допомогою спеціальних засобів, передбачених Angular. Якщо вам потрібна деяка функціональність, реалізована в трубі, але таким чином, як використовувати її як звичайний клас TypeScript, тоді ви повинні створити цей regularклас і використовувати його у своєму TS-коді ( your-component.tsнаприклад). Якщо вам потрібна однакова функціональність у трубі, ви завжди можете використовувати цей regularклас і з труби.
Олександр Абакумов

Найбільша різниця полягає в тому, що ви створюєте більше примірників класу таким чином. При використанні синтаксису Angular він поводиться як сингелтон і просто інстанціюється один раз.
Sir2B
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.