Угловой 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'