Подтвердить что ты не робот

Как использовать @HostBinding с @Input свойствами в Angular 2?

(Angular 2 RC4)

С @HostBinding мы должны иметь возможность изменять свойства хоста, не так ли? Мой вопрос: применимо ли это к свойствам @Input(), и если да, то каково правильное использование? Если нет, есть ли другой способ достичь этого?

Я сделал Plunker здесь, чтобы проиллюстрировать мою проблему: https://embed.plnkr.co/kQEKbT/

Предположим, что у меня есть пользовательский компонент:

@Component({
  selector: 'custom-img',
  template: `
    <img src="{{src}}">
  `
})
export class CustomImgComponent {
  @Input() src: string;
}

И я хочу передать свойство src директивой атрибута:

@Directive({
  selector: '[srcKey]'
})
export class SrcKeyDirective implements OnChanges {

  @Input() srcKey: string;
  @HostBinding() src;

  ngOnChanges() {
    this.src = `https://www.google.com.mt/images/branding/googlelogo/2x/${this.srcKey}_color_272x92dp.png`;
  }
}

Почему эта директива не может изменить входное свойство [src] для пользовательского компонента?

@Component({
  selector: 'my-app',
  directives: [CustomImgComponent, SrcKeyDirective],
  template: `<custom-img [srcKey]="imageKey"></custom-img>`
})
export class AppComponent {
  imageKey = "googlelogo";
}

Спасибо!

4b9b3361

Ответ 1

@HostBinding() не создает привязки свойств к свойствам хост-компонента. Это может быть полезно для отчета об ошибке: -)

Я работал с обходным путем с exportAs и переменной шаблона, но это довольно уродливо. https://plnkr.co/edit/TobNVn?p=preview

После некоторого рассмотрения, я думаю, он должен работать. В противном случае я не знаю, что бы сделать @HostBinding() src; вообще.

@HostBinding('attr.src') src; или @HostBinding('class.src') src; - более распространенные случаи.

Ответ 2

Вам нужно объединить декораторы следующим образом:

@HostBinding('class.active') @Input() active: boolean = false;