如何在Angular 2中使用@HostBinding和@Input属性？

Question

（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";
}

谢谢！

Answer 1

你需要像这样组合装饰器：

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

Answer 2

如果你的@Input是一个对象，你可以这样做：

@Input() settings: Settings;

@HostBinding('class.active')
public get isActive(): boolean {
  return this.settings.isActive;
}

Answer 3

@HostBinding()不会为主机组件的属性创建属性绑定。这可能值得一个bug报告; - ）

我通过使用exportAs和模板变量的解决方法来实现它，但这非常难看。 https://plnkr.co/edit/TobNVn?p=preview

经过一番考虑，我认为它应该有效。否则我不知道@HostBinding() src;会做什么。

@HostBinding('attr.src') src;或@HostBinding('class.src') src;是更常见的情况。

Answer 4

（1）使用输入属性声明主机绑定属性。

@HostBinding('attr.aaa') @Input() aaa: boolean = false;

（2）将主机绑定属性设置为输入属性

@Input() aaa: string;
@HostBinding('attr.bbb') ccc: string;

ngOnInit(){
  this.ccc = this.aaa;
}

Answer 5

注意将get与主机绑定一起使用。

至少我无休止的递归（数千周期）。将console.log放入get函数中以进行检查：

@HostBinding('@someAnim') get whatever() {
    console.log('#### traffic.....');
    return true;
}

我什至遇到了麻烦，只是改变了某个类（花哨的Angular动画什么也没有），甚至不依赖任何其他类成员：

@HostBinding('class.foobar') get _____() {
    console.log('#### more traffic.....');
    return true;
}

此外，在开发过程中将其包含在组件中（作为“自由流金丝雀”）也没有什么害处：

ngOnChanges(changes: SimpleChanges) {
    console.log('#### more traffic.....');
}

每个状态更改和实例化的组件应该只看到一个日志条目，无论如何都不会成千上万。

-最后-我很幸运：

• 用于传入（@Input）和传出（@HostBinding）的distinct变量
• 更改后的支出
• →没有“自由流动”

    @Input() animTileAttrib = false;
    @HostBinding('@animTile') paramPack: AnimParams = { value: false, params: {}};

    ngOnChanges(changes: SimpleChanges) {
        console.log('#### traffic.....');
        if ('animTileAttrib' in changes) {
            this.paramPack = { value: changes.animTileAttrib.currentValue, params: {} };
        }
    }