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

我尝试使用以下方法从组件

对话框DictionariesTypesComponent

获取变量值：

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

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

其中，对话框字典类型组件有：

public dictionaries: any[] = [];

为什么我会出错：

ERROR TypeError: Cannot read property 'dictionaries' of undefined

---

您可能需要使用一些服务和rxjs主题。看看那里

将

ViewChild

与

{static:false}

一起使用时，属性在

ngAfterViewInit

钩子中（以及之后）可用

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

如果在

ngOnInit

中确实需要它，可以将static设置为

true

，但请注意，如果子组件周围有任何结构指令，它将失败。

在阅读了你的标题之后，我发现你正在寻找的组件不是一个孩子。在这种情况下，您应该—始终—使用一个服务并将此服务注入两个组件中

ViewChild

仅用于获取组件模板中声明的组件或

HTMLElement

实例的引用

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

@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使用数据流来简化您的生活（甚至可能是状态管理）。我同意，一开始比较难，但一旦你掌握了窍门，你的代码就会非常满意

角度服务中的用于与组件共享数据

组件不应该直接获取或保存数据，它们肯定 不应该故意提供虚假数据。他们应该专注于展示 数据，并将数据访问委托给服务

---

我将创建一个服务，将我需要的数据存储在另一个不是子组件的组件中

您可以说，

@ViewChild

仅在一个组件位于另一个组件内部时使用<代码>但不分开：

我不想使用`rxjs Subject`有什么建议吗？仍然使用某种服务是一种方法。一个服务仍然可以有自己的状态和您喜欢的类型，而不限于一个可观察的。阅读这里的单例服务：您可以通过服务共享数据well@Jony没有rxjs，您无法观察对dictionaries属性执行的更改。通常对话框组件在门户动态打开。在这种情况下，它不是。child和

@Viewchild

找不到它。如果是这样，当您打开对话框时，您必须存储对对话框组件的引用才能访问它，但更好的解决方案是使用主题，它在对话框关闭时发出并返回预期值。你能显示你的模板吗？我不确定他是否能像那样直接访问非子组件。只有在

ngAfterViewInit

？@Jony我已经更新了我的答案，使之更符合你的问题：）那么，存在什么ViewChild？顾名思义它用于访问子组件根据您的问题，您正在尝试从非子组件的组件访问数据到您所在的组件。如果我可以问一下，您的组件是否由单独的父组件引用？根据您的情况，在组件之间共享数据的另一种方法是使用@Output decorator并对其他组件可以访问的变量发出更改