Angular 6 多个 @input() 级别

Posted 2023-03-05

【中文标题】Angular 6 多个 @input() 级别

【英文标题】：Angular 6 multiple @input() level

【发布时间】：2019-03-30 05:44:39

【问题描述】：

我有一个包含多级子组件的组件：

Parent
  |
Child1
  |
Child2
  |
Child3

我正在尝试通过 @Input() 将值从父母传递给每个孩子

因此，例如在父母中我有这个：

@Input() info: Info=  as Info;

在父组件的ngOnInit初始化，值OK，我查了。

在我设置的模板中：

[info]="info"

每个孩子都有与父母相同的输入。

该值正确传递给Child1，但从Child2 到Child3 的值保持为空，这是怎么回事？

【问题讨论】：

子 2 是子 1 的子组件，子 3 是子 2 的 chld 组件吗？

正如@SiddAjmera 提到的，根据您的图表，孩子 2 基本上是孩子 1 的孩子和父母的孙子......对吗？

SharedService 是解决这个问题的完美解决方案

【参考方案1】：

您不能将@Input 属性从ParentCompoennt 传递给子组件的子组件。为此，您有两种方法：

在子 1 的模板中将 @Input 从子 1 传递给子 2。

创建一个 SharedService，它将作为依赖项注入到 Parent、Child1、Child2 和 Child3 中。从 Parent 中设置该属性，然后在 Child1、Child2 和 Child 3 中获取该属性。

我建议使用 SharedService 方法。

import  BehaviorSubject, Observable  from 'rxjs';
...
export class SharedService 
  private input: BehaviorSubject<any> = new BehaviorSubject<any>(null);
  public input$: Observable<any> = this.resultList.asObservable();

  setInput(input) 
    this.input.next(input);
  

然后在所有子组件中：

input: any;
...
constructor(private sharedService : SharedService ) 
...
ngOnInit() 
  this.sharedService.input$.subscribe(input => this.input = input);