Angular2 指令修改其 html 主机

Question

我正在使用 Angular 2，我想要一个指令来修改其宿主 html 元素的行为。例如，我想要一个带有选择器 '[inner-directive]' 的 InnerDirective，这样：

@Component({
selector: '[outer-component]'
template: `
<div
  inner-directive
></div>
`
})
class outerComponent{
someAttribute: boolean;
}

和

一样

@Component({
selector: '[outer-component]'
template: `
<div
  [ngClass] = "{'some-class': someAttribute}"
></div>
`
})
class outerComponent{
someAttribute: boolean;
}

我不希望 InnerDirective 成为一个组件，它有自己的模板来完成这项工作（someAttribute 被传递下来），因为这会创建一个多余的 html 元素。

更一般地说，我想通过将一个空组件放入另一个组件（具有上述 html 冗余）中，通过将内部组件改为指令来做任何可以实现的事情。这样我的“叶子”都可以是指令。

非常感谢您的帮助。

Answer 1

@Directive({
  selector: '[innerDirective]',
  host: {'[class.some-class]': 'innerDirective'}
})
class InnerDirective {
  @Input() innerDirective: boolean;
}

• host: {'[class.some-class]': 'someAttribute'} 将innerDirective 输入的值绑定到宿主元素上的some-class。

• 与选择器同名的输入 (@Input() innerDirective: boolean;) 允许使用简洁的绑定语法（如下所示）

@Component({
  selector: '[outer-component]',
  directives: [InnerDirective],
  template: `
<div [innerDirective]="someAttribute"></div>`
})
class outerComponent{
  someAttribute: boolean;
}

• [innerDirective]="someAttribute" 将 someAttribute 值绑定到 InnerDirective 的 innerDirective 输入。

Answer 2

这通常是属性指令的目标。它允许更改它所应用的元素的外观或行为。

这是一个示例：

@Directive({
  selector: '[inner-directive]'
})
export class InnerDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

更新

您可以在定义指令时利用host 属性

@Directive({
  (...)
  host: {
    '[class.myClass]': 'displayClass',
    '[attr.someAttr]': 'someAttrValue',
    '[attr.otherAttr]': 'someValue'
  }
})
export class InnerDirective {
  @Input('innner-directive')
  someValue: string;

  constructor() {
    // myClass is added on the host
    this.displayClass = true;

    // myClass isn't added on the host
    // this.displayClass = false;

    this.someAttrValue = 'some value';
  }

  ngOnInit() {
    console.log(this.someValue);
  }
}