Question

我正在使用Angular 2，我想要一个指令来修改其主机html元素的行为。例如，我希望InnerDirective使用选择器'[inner-directive]'，以便：

@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

$('.chosen').chosen("destroy").chosen();

@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的{{1}}输入。

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

Angular2指令修改其html主机

2 个答案: