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 冗余），通过将内部组件改为指令来做任何可以实现的事情。这样我的 "leaves" 都可以是指令。

非常感谢您的帮助。

Answer 1

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

这是一个示例：

@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);
  }
}

Answer 2

@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 输入。

Angular2 指令修改其 html 主机

Angular2 directives modifying its html host

angular2-directives

angular2-template

angular