Угловой 2: установить и удалить пользовательские трубы?

Я создал три пользовательских канала для заказа данных с сервера (ASC, DESC и Default), они отлично работают, я хочу, чтобы эти три канала были активными или нет в зависимости от взаимодействия пользователя.

Вопрос в том, возможно ли изменить пользовательский канал с переменной, например?

Это мой код...

<label *ngFor="let user of users | {{pipeOrderType}}:'name'">{{user.id}}{{user.name}}, </label>

1 ответ

Решение

Нет возможности назначать разные каналы динамически. Вы можете создать канал, который ведет себя по-разному в зависимости от параметра

@Pipe({
  name: 'dynamicPipe'
})
class DynamicPipe implements PipeTransform {
  transform(value, pipe) {
    if(!value || !pipe) {
      return null;
    }
    return pipe.transform(value);
  }
}

Где труба может быть использована как

<label *ngFor="let user of users | dynamicPipe:pipe">{{user.id}}{{user.name}}, </label>

пока здесь pipe является ссылкой на фактический экземпляр класса канала, а не на строку. Вы можете ввести трубы в свой компонент, как

class MyComponent {
  constructor(private pipe1:Pipe1, private pipe2:Pipe2) {}

  clickHandler() {
    if(xxx) {
      this.pipe = this.pipe1;
    } else {
      this.pipe = this.pipe2
    }
  }
}

Вы также можете ввести трубы в dynamicPipe

@Pipe({
  name: 'dynamicPipe'
})
class DynamicPipe implements PipeTransform {
  constructor(private pipe1:Pipe1, private pipe2:Pipe2) {}

  transform(value, pipe) {
    if(!value || !pipe) {
      return null;
    }
    if(pipe == 'pipe1') {
      return pipe1.transform(value);
    }
    if(pipe == 'pipe2') {
      return pipe2.transform(value);
    }
  }
}

а затем использовать его с именем трубы

<label *ngFor="let user of users | dynamicPipe:pipe">{{user.id}}{{user.name}}, </label>

куда pipe является 'pipe1' или же 'pipe2'

Другие вопросы по тегам