问题标签 [viewchild]

我有一个父组件（A）和 2 个子组件（B，C）。父组件包含页面的基本布局，不会在所有布局中更改。当用户选择不同的按钮时，我需要交换页面中间的内容。

步骤1：单击父组件A中的按钮->刷新到B步骤2：用户单击子组件B中的按钮->刷新到C

由于我必须坚持不懈地保持组件 A 的基本布局，有哪些方法可以接近第 2 步？

我正在尝试访问 Angular2 中的 div，如下所示：

但我得到以下异常：

异常：调用节点模块失败并出现错误：TypeError：this.elementRef.nativeElement.querySelector 不是函数

I'm working with Angular 2 and Ionic 2 and I would like to get a property from a parent component.

So my parent composent is a class named "ServicesPage", and my child component is named "AddonCell".

ServicesPage.html

ServicesPage.ts

AddonCell.ts

UPDATE

AddonModule

Note: savedAddons is an array containing string instance name.

So the main problem is how to get all the instanciated object AddonCell in order to access properties ?

我有一个 Angular2 视图，它调用子组件上的一个方法来在视图加载期间对其进行初始化。子组件绑定到我想在方法调用期间访问的父组件上的一个属性；但是，由于某种原因，直到调用完成后才会填充它。这个 plunker演示了这个问题。

父模板：

子模板：

谁能告诉我为什么该属性在此阶段未绑定，以及我可以做些什么来确保在方法调用期间填充它？

我正在尝试使用 NGX-DataTable 的过滤选项（此处为文档，此处为演示）并尝试重写代码的 ViewChild 部分，因为我将通过变量“config”将表格动态传递给对话框组件，因此我可以搜索“采购订单”栏。

我可以让表格按采购订单列过滤，但有两个问题：

1. 我无法通过在输入中删除来撤消过滤。
   例如：如果我默认有10个结果，然后输入“a”有4个结果，然后输入“aa”没有结果，即使我完全删除用于过滤的输入我仍然没有结果。

2. 当过滤器更新时，表格应该回到第一页，现在它只是停留在原来的位置。

任何指针将不胜感激！

因此，到目前为止，我在对话框组件中拥有通过变量 config 传入的表信息：

对话框组件中的 HTML：

TS：

我有以下 DOM 结构

我可以carousalElements使用ViewChildren

问题：div当我在 div 下动态添加一个新的#carousalElement时，它不会显示在carousalElements数组下。

我错过了一些明显的东西吗？

我正在尝试使用 ViewChild 获取子组件的元素，但找不到实现此目的的方法。

让我们在模板中说：

并通过以下方式获得此参考：

我尝试这样做的原因是通过使用scrollToHTMLElement 的功能自动滚动到该子组件的位置来将视图聚焦到该子组件。（请参阅单击时如何将元素滚动到视图中）

我可以通过为该子组件提供 id 并使用 document.getElementById() 检索来实现它，但我想知道是否有办法使用模板引用变量或任何角度方式来做到这一点。

提前致谢！

有没有办法从动态创建的组件中获取 ViewContainerRef？我的动态创建的组件内部有一个 ngContent 元素，我想在动态创建后填充它。

我想一些手动方法来解决 ViewChild 而不是使用装饰器。一些想法？

非常感谢。

@ViewChild在以下情况下，我无法正确初始化带注释的字段：

@ViewChild带注释的字段undefined在某些情况下会保留：

• type的父组件X实现了type的抽象基类XBase，它具有三个抽象字段
• 类型的组件用类型注释X这些字段，并且@ChildViewABC
• C反过来也扩展XBase，但使用不同的模板和选择器X
• 类型字段A并B在类型组件中初始化属性X
• 类型字段C未定义

这是我的代码的缩短版本

UserGridHeaderComponent并且UserGridBodyComponent等同于Drive-组件。

以下是 html 模板的相关部分：

drive-view.html

网格.html

drive-members-modal.html

所以我想做的GridView<T>是DriveMembersModalComponent重用DriveViewComponent. 当用户想要查看驱动器的成员时，它应该在弹出的引导模式中呈现类似的网格。

但是DriveViewComponent'sdriveMembersModal没有完全初始化。它的

保持未定义。似乎 Angular 在模板中找不到匹配的元素。我试过不同的选择器没有效果。我还尝试了将属性添加到元素的@ViewChild(<reference>)语法。#reference然而，这给了我一个ElementRef，我不知道如何处理。它似乎只是一个 DOM 引用，而不是一个角度组件。

编辑：

我从我的应用程序中创建了一个 plunker 示例：https ://embed.plnkr.co/083a5AnkaiCG796adTkR/

请按照以下说明重现错误：

• 打开浏览器的调试模式以查看控制台输出
• 单击“驱动器”选项卡
• 控制台将打印DriveMembersModalComponent，它对应于C上面提到的组件。grid场undefined是。打印在DriveViewComponent's中执行ngAfterViewInit()

我想使用同名的模板引用变量在@ViewChildren.

元数据属性：

selector - 用于查询的指令类型或名称。
read - 从查询的元素中读取不同的标记。

但是，我得到了一个模板解析错误：

样本：

问题：
1. 是否可以在模板中定义同名的模板引用变量？
2. 如何使用同一个选择器查询多个元素，而不是单独定义名称？