Javascript 如何从Angular 9中的子组件访问父组件

问题

无法使用viewContainerRef进行父子通信。 代码在Angular 8.2中运行

 this.viewContainerRef[ '_data' ].componentView.component.viewContainerRef[ '_view' ].component;

错误

错误类型错误：无法读取未定义的属性“componentView”

公共Api

我需要从子组件访问父组件

Ng版本

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.900.7
@angular-devkit/core         9.0.7
@angular-devkit/schematics   9.0.7
@schematics/angular          9.0.7
@schematics/update           0.900.7
rxjs                         6.5.3

无法在stackblitz中复制此问题

问题

ViewContainerRef在9中不工作

工作视图ContainerRef

角度9中的ViewConatinerRef不工作

任何建议都是非常受欢迎的。

你不应该为了避免麻烦而访问第三方库的私人成员。幸运的是，如果我知道你想做什么，你可以做一些事情来避免访问这些私人成员。我将展示3个解决方案，其中2个在本答案末尾引用的stackblitz上实现

让我们假设您有这样一个场景：一个父组件，由于某种原因，它有一个您希望在子组件中直接访问的属性

父组件： @组成部分{ 模板：` ` } 导出类ParentComponent{propertyA:string；} 案例A：将父母直接注射到孩子体内 @组件{选择器：'子'，…} 出口类儿童用品{ constructorprivate _parent:ParentComponent{this._parent.propertyA='some value'；} } 案例B：通过孩子的ViewContainerRef获取家长 @组件{选择器：'子'，…} 出口类儿童用品{ 构造函数私有viewContainerRef:viewContainerRef{ const_injector=this.viewContainerRef.parentInjector； const\u parent:ParentComponent=\u injector.getParentComponent； 这._parent.propertyA='some value'； } } 这是重要的一部分：有角喷油器的存在正是为了满足您的需求，因此，与其自己尝试获取部件的参考，正确的做法是找到如何找到喷油器来搜索您。请记住，注入器按层次结构分布，如果注入器无法解析符号，它会要求其父注入器尝试递归解析符号，直到到达根注入器。这导致我们采用第三种方法，直接获取部件的喷油器：

案例C：让父母通过孩子的注射器，直接注射 @组件{选择器：'子'，…} 出口类儿童用品{ 构造函数私有_注入器：注入器{ const\u parent:ParentComponent=this.\u injector.getParentComponent； 这._parent.propertyA='some value'； } } 案例B和C之所以有效，是因为您的组件分布在父N子关系中的组件树中，并且在声明/导入它们的模块中，在某个点上它们将有一个公共注入器

我已经进行了修改，以显示这两种解决方案案例A在A-component上使用，案例B在B-component上使用，

您不应该完全访问第三方库的私有成员，以避免遇到麻烦。幸运的是，如果我知道你想做什么，你可以做一些事情来避免访问这些私人成员。我将展示3个解决方案，其中2个在本答案末尾引用的stackblitz上实现

让我们假设您有这样一个场景：一个父组件，由于某种原因，它有一个您希望在子组件中直接访问的属性

父组件： @组成部分{ 模板：` ` } 导出类ParentComponent{propertyA:string；} 案例A：将父母直接注射到孩子体内 @组件{选择器：'子'，…} 出口类儿童用品{ constructorprivate _parent:ParentComponent{this._parent.propertyA='some value'；} } 案例B：通过孩子的ViewContainerRef获取家长 @组件{选择器：'子'，…} 出口类儿童用品{ 构造函数私有viewContainerRef:viewContainerRef{ const_injector=this.viewContainerRef.parentInjector； const\u parent:ParentComponent=\u injector.getParentComponent； 这._parent.propertyA='some value'； } } 这是重要的一部分：有角喷油器的存在正是为了满足您的需求，因此，与其自己尝试获取部件的参考，正确的做法是找到如何找到喷油器来搜索您。请记住，注入器按层次结构分布，如果注入器无法解析符号，它会要求其父注入器尝试递归解析符号，直到到达根注入器。这导致我们采用第三种方法，直接获取部件的喷油器：

案例C：让父母通过孩子的注射器，直接注射 @组件{选择器：'子'，…} 出口类儿童用品{ 构造函数私有_注入器：注入器{ const\u parent:ParentComponent=this.\u injector.getParentComponent； 这._parent.propertyA='some value'； } } 案例B和案例C之所以有效，是因为您的 组件以父N子关系分布在组件树中，在某个点上，它们将在声明/导入它们的模块处有一个公共注入器

---

我已经修改以显示这两种解决方案案例A用于A组件，案例B用于B组件，

主要问题是。。。为什么你不能在stackblitz上复制它？也许在你的项目中还有一些你在stackblitz上没有做的事情？顺便说一句，为了在stackblitz上运行它，你应该在polyfills.ts中注释核心js行。谢谢，但我需要通过viewconatinerRef获得父组件，因为它在Angular 8.2中工作。代码在Angular 9中相同。请查看ViewConatineRef的更新快照。主要问题是。。。为什么你不能在stackblitz上复制它？也许在你的项目中还有一些你在stackblitz上没有做的事情？顺便说一句，为了在stackblitz上运行它，你应该在polyfills.ts中对核心js行进行注释。这是一个。谢谢，但我需要通过viewconatinerRef获得父组件，因为它在Angular 8.2中工作。代码在Angular 9中相同。请非常查看ViewConatinerRefHanks的更新快照，请注意，viewContainerRef.parentInjector在Angular 7中不推荐使用，没有替换。有没有类似的方法可以在不知道其类型的情况下访问指令中的主机组件？也许您可以使用引用变量来传递它：非常感谢，请注意，viewContainerRef.parentInjector在Angular 7中不推荐使用，无需替换。是否有类似的方法可以在不知道其类型的情况下访问指令中的主机组件？您可以使用引用变量传递它：

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.900.7
@angular-devkit/core         9.0.7
@angular-devkit/schematics   9.0.7
@schematics/angular          9.0.7
@schematics/update           0.900.7
rxjs                         6.5.3