Как использовать автономные компоненты, конвейеры или директивы в функциональных модулях

Question

Я обновил свой проект angular до angular 14. Теперь я хочу иметь немногоstandalone components,pipes, илиdirectives.

У меня есть рекомендуемый модуль с именем ProductModule , и я хочу использовать в этом модуле автономный канал, называемый в верхнем регистре .

      // structure
---Product
          ---product.component
          ---product.service
          ---product.module.ts

---StandabloneFolder
                    ---uppercase.pipe.ts

Моя заглавная труба

      @Pipe({
    name: 'uppercase',
    standalone: true,
})
export class UppercasePipe implements PipeTransform {
    transform(value: string): string {
        return "UPPERCASE_INPUT"
    }
}

в product.component.html

      {{'Abolfazl Roshanzamir' |uppercase}}

получить следующую ошибку:

Не найден канал с именем 'uppercase' product.component.ts(6, 39): ошибка в шаблоне компонента ProductComponent.

ПРИМЕЧАНИЕ:

Эта проблема будет решена, если я добавлюstandalone: trueв product.component и удалите ProductComponent из массива объявлений .

Answer 1

вам нужно только импортировать его в компонент раздела импорта

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

@Component({
  templateUrl: './basic-page.component.html',
  standalone: true,
  styles: [],
  imports: [JsonPipe],
})
export class BasicPageComponent {}

HTML-шаблон:

      <pre>{{ "objeto" | json }}</pre>

Answer 2

Вам нужно добавить UppercasePipe вimportsиз product.module.ts.

product.module.ts

      @NgModule({
  imports: [/*some import*/, UppercasePipe],
  /* other stuff*/
})
export class ProductModule {}

Answer 3

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

      @Pipe({  
   name: 'my_pipe_name',  
   standalone: true,
})

Примечание. Я использовал это с angular 17, я не знаю, то же самое ли это с angular 14.