Замените вызов функции на трубу в угловом шаблоне - PullRequest
Новая
       8

Замените вызов функции на трубу в угловом шаблоне

0 голосов
/ 11 мая 2018

Ознакомьтесь с преимуществами использования конвейеров по сравнению с вызовом функций в угловых шаблонах.см. видео здесь: https://www.youtube.com/watch?v=I6ZvpdRM1eQ

У меня есть эта функция в моем template.html 

<h1 [class]="alignText()" [innerHtml]="data.text"></h1>

И эта функция в моем component.template.ts 

  alignText(): string {
    let defaultText = "center";
    return "text-" + (this.text || defaultText)
  }

У кого-нибудь есть предложения, как я мог бы согласовать html alignText() с каналом для достижения того же результата?

1 Ответ

0 голосов
/ 11 мая 2018

См. Документацию Angular по трубам: https://angular.io/guide/pipes

Вы можете использовать декоратор @Pipe в классе для труб. Он должен реализовывать интерфейс PipeTransform, который требует реализации метода transform, который принимает значение и возвращает новое значение. transform может принимать дополнительные аргументы, если это необходимо. 

@Pipe({ name: 'alignClass' })
export class AlignClassPipe implements PipeTransform {
  transform(value: string): string {
    return `text-${value || "center"}`;
  }
}

Добавьте эту трубу к declarations в вашем модуле. Теперь вы можете использовать [class]="text | alignClass"

...