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

<罢工> 将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使用数据流来简化生活（甚至进行状态管理）。我同意，起初比较难，但是一旦掌握了窍门，您的代码就会很高兴。

Answer 2

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

Answer 3

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

组件不应该直接获取或保存数据，它们当然不应故意提供虚假数据。他们应该专注于呈现数据并委托对服务的数据访问。

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

我将创建一个服务来存储我需要的数据，该数据不是孩子。

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

3 个答案: