如何从另一个组件而不是子组件获取变量的值？

Question

我尝试使用以下方法从组件 DialogDictionariesTypesComponent 获取变量值：

@ViewChild(DialogDictionariesTypesComponent, { static: false })
dialogDictionaryTypes: DialogDictionariesTypesComponent;

ngOnInit() {
    console.log(this.dialogDictionaryTypes.dictionaries);
}

其中 DialogDictionariesTypesComponent 具有：

public dictionaries: any[] = [];

为什么会出现错误：

ERROR TypeError: Cannot read property 'dictionaries' of undefined

Answer 1

您可能需要使用一些服务和 rxjs 主题。看看那里 https://jasonwatmore.com/post/2018/06/25/angular-6-communicating-between-components-with-observable-subject

Answer 2

~~将 ViewChild 与 {static: false} 一起使用时，属性在 ngAfterViewInit 钩子~~

中（及之后）可用
ngAfterViewInit() { console.log(this.dialogDictionaryTypes.dictionaries); }

~~如果你在 ngOnInit 中确实需要它，你可以将 static 设置为 true，但请注意，如果你的 child 组件周围有任何结构指令，它将失败。~~

阅读您的标题后，我发现您要查找的组件不是 child。在那种情况下，您应该 - 始终 - 使用服务并将此服务注入两个组件。

ViewChild is only used to obtain a reference of a component or HTMLElement instance declared inside your component's template

此外，您最初关于从组件访问数据的想法有点错误。你永远不应该这样做，因为组件只是用于视图和与视图的交互，而不是用于数据存储。尽量让他们保持愚蠢。

@Injectable({ providedIn: 'root' })
export class DictonaryService {
  readonly dictionaries: Dictionary[] = [];
}

@Component({

})
export class DialogDictionariesTypesComponent {
  constructor(private ds: DictionaryService) {}

  ngOnInit(): void {
    console.log(ds.dictionaries);
  }
}


@Component({

})
export class SomeOtherComponent {
  constructor(private ds: DictionaryService) {}

  ngOnInit(): void {
    console.log(ds.dictionaries);
  }
}

在此示例中，这些组件将记录相同的字典数组。然而，这是非常初级的，你真的应该研究使用 rxjs 的数据流来让你的生活更轻松（甚至可能是状态管理）。一开始比较难，我同意，但是一旦你掌握了窍门，你的代码就会非常满意。

Answer 3

在 angular 中，服务用于与组件共享数据。

Components shouldn't fetch or save data directly and they certainly shouldn't knowingly present fake data. They should focus on presenting data and delegate data access to a service.

https://angular.io/tutorial/toh-pt4

我将创建一个服务来存储我需要的非子组件中的数据。

如何从另一个组件而不是子组件获取变量的值？

How to get value of variable from another component, not child?

angular

angular5

angular8