Question

考虑此Angular 6组件

@Component({
  template: '<div my-directive>content</div>'
})
export class ACustomComponent {}

对我来说，将最特定的组件实例注入指令的构造函数中的最简单方法是什么？

@Directive()
export class MyDirective {
  // how to reference the component whose template hosts this directive?
  constructor(private hostComponent: Component) {}
}

我想到的最简单的方法是使用@Component()中提供的服务，将组件实例存储在service属性中，然后将相同的服务注入指令中并从该属性检索实例。想知道是否有一种更简单，更通用的方法（因此我不必每次都需要提供该服务），这意味着该指令不需要知道其宿主组件的类型。

PS：我的问题与from this one不同，因为另一个人希望将指令直接应用于的组件实例-<my-cmp my-directive></my-cmp>，我在问最近的父组件，该指令是否为直接应用于它或应用于其模板中的本机HTML元素。

基本上，我要解决的问题是：我需要在指令中执行方法并将其绑定到承载它们的组件的this上下文中，而该指令不会提前知道组件的类型。 / p>

someMethod.bind(this.hostComponent)();

Answer 1

对于动态组件类型，我确实喜欢这样，它可以在Angular 9上运行。

export class FromItemComponentBase  {
  constructor(private hostElement: ElementRef) {
    hostElement.nativeElement.__component=this;
  }
}

@Component({
  selector: 'input-error',
  templateUrl: 'component.html'
})
export class FromItemErrorComponent extends FromItemComponentBase {
  constructor(private hostElement: ElementRef) {
    super(hostElement);
  }
}

@Component({
  selector: 'input-password',
  templateUrl: 'component.html'
})
export class FromItemPasswordComponent extends FromItemComponentBase {
  constructor(private hostElement: ElementRef) {
    super(hostElement);
  }
}

@Directive({selector: 'input-error,input-password,input-text'})
export class FormInputDirective {
  component:FromItemComponentBase;

  constructor(private hostElement: ElementRef) {
    this.component=hostElement.nativeElement.__component;
  }
}

Angular 6指令：获取对主机组件实例的引用

1 个答案: