Angular 9：如何从子指令中的父组件获取数据

Question

我有一个父组件，里面有子指令。需要从指令中的组件获取输入数据。

<my-parent [data]="'Hello from parent'">
  <input myChild>
</my-parent>

父组件

@Component({
  selector: 'my-parent',
  template: `
    <ng-content select="[myChild]"></ng-content>
  `
})
export class ParentComponent {
  @Input() data: string;
}

儿童指令

@Directive({
  selector: '[myChild]'
})
export class ChildDirective implements OnInit {
  value: string;

  ngOnInit() {
    // needs to get data from parent component here
  }
}

我可以将父组件注入指令，但我不想这样做，因为它增加了循环依赖的风险。

我可以在 ParentComponent 中使用 @ContentChild 并通过公共属性在 AfterContentInit 中传递数据，但我不确定此属性何时可以在 ChildDirective 中使用，我应该在这种情况下使用 AfterContentChecked 吗？

父组件

@ContentChild(ChildDirective, {static: true}) child: ChildDirective;

ngAfterContentInit() {
  this.child.value = this.data;
}

儿童指令

value: string;

ngAfterContentChecked() {
  // will be available data from parent here?
}

也许我应该使用服务在组件和指令之间共享数据？

https://stackblitz.com/edit/angular-pass-data-to-child-directive

Answer 1

您是否有特殊原因需要使用 ng-content 而不是 ng-template？

我建议你使用 ng-templates 的方法如下

父组件

@Component({
  selector: 'my-parent',
  template: `
    <ng-template 
      [ngTemplateOutlet]="child" 
      [ngTemplateOutletContext]="{ $implicit: data }">
    </ng-template>
  `
})
export class ParentComponent implements AfterContentInit {
  @Input() data: string;
  @ContentChild(TemplateRef, {static: true}) child: TemplateRef<any>;
}

儿童指令

@Directive({
  selector: '[myChild]'
})
export class ChildDirective {
  @Input()
  value: string;
}

用法

<my-parent [data]="'Hello from parent'">
   <ng-template let-dataThroughParent>
      <input myChild [value]="dataThroughParent" class="form-control">
   </ng-template>
</my-parent>

重要

在这种特定情况下（示例），实际上没有必要将数据绑定到您的父级，然后通过模板变量获取它，然后再次将其绑定到您的“myChild”指令，因为这将是多余且不必要的，如果您的用例与此类似，我会将数据直接传递给“myChild”指令，如下所示：

<my-parent [data]="'Hello from parent'">
   <ng-template>
      <input myChild [value]="'Hello from parent'" class="form-control">
   </ng-template>
</my-parent>

请注意，它也适用于您的初始方法：

<my-parent [data]="'Hello from parent'">
  <input myChild [value]="'Hello from parent'">
</my-parent>

但我假设您确实需要从父级传递在您使用父级的范围内无法访问的数据。这是一个工作示例

https://stackblitz.com/edit/angular-pass-data-to-child-directive-ebcbg6

Answer 2

您可以使用@Input() 绑定将数据传递给指令。

app.component.html

<my-parent [data]="'Hello from parent'"></my-parent>

my-parent.component.ts

@Component({
    selector: 'my-parent',
    templateUrl: './my-parent.component.html',
    styleUrls: ['./my-parent.component.scss'],
})
export class MyParentComponent implements OnInit {

   @Input() data: string;
}

my-parent.component.html

<input [myChild]="data"/>

my-child.directive.ts

@Directive({
  selector: '[myChild]'
})
export class ChildDirective implements OnInit {
  value: string;

@Input('myChild') data: string;

  ngOnInit() {
      console.log(this.data) // data from parent
  }
}

https://angular.io/guide/attribute-directives