我有三个嵌套组件，称为和level0，定义如下：level1level2

在控制台中，我希望看到：

但我看到的是：

我错过了什么？为什么Level0组件Level2不能通过@ViewChild？

有没有办法访问中的Level2方法Level0？

这是plnkr

我在看@这个 SO Q & A，想知道是否可以有一个基地abstract class？而不是interface, 是否可以在子组件中具有不同的基类实现，父组件可以通过Angular2@ViewChild中的装饰器访问？

理想情况下，我希望有一种方法让通过父级实例化的子组件Router能够调用父级路由器——这有意义吗？我希望孩子能够打电话parentRouter.navigate(["SomeOtherRoute", { args: 'blah' }]);。

我最初的方法是让子组件实现一个基类，父组件将通过@ViewChild装饰器获得对它的引用。父级将subscribe响应子级尝试调用导航事件的操作，并且其处理程序将调用router.navigate（因为它在父级具有路由器）。

我正在尝试将组件动态加载到另一个组件中，它以前可以工作，但是当更新到 beta 16 时它停止了。我阅读了更改日志并更改了我的代码，但仍然没有成功。

我登录到控制台我从@ViewChild 得到的东西我想得到一个 ViewContainerRef 但我得到了导致错误的 ElementRef。如何解决这个问题

请查看我的控制台日志的代码和屏幕截图

}

HTML 代码

如果 HTML 元素已添加到 DOM（例如单击按钮后），我们如何访问该元素？viewChild 看不到。

更新 1：更多描述

我使用了 jquery 数据表（jquery.dataTables 肯定类型版本）。基于此链接，我可以添加新列并在其中定义 html。我写了这段代码：

使用 Chrome 开发人员工具，我看到了这一点：

第一个锚标记有效，但使用 href，而不是 routerLink。

第二个锚标记不起作用，因为角度指令不符合 href。

我尝试使用 DynamicComponentLoader 来编译它，并更改了如下代码：

但是我无法使用 viewChild 访问#target 元素。（我想通过 loadNextToLocation 用另一个组件更改它）。我认为这不是获得良好结果的优化方式。

我想将 routerLink 与 jquery 数据表中的命令按钮一起使用。

你能帮我在正确的方向上解决这个问题吗？

先感谢您。

解决方案 ：

如果您想使用 javascript 或一些回调函数将 HTML 添加到 DOM，请首先从模板中确定一个标记，该标记将来可以成为这些元素的父级。

1. 将模板变量添加到此父元素。（例如#target）

   /li>

2. 然后在你的 html 代码中添加一个简单的类和一个简单的属性（这个代码是在页面用 angular 编译后生成的，你也可以用 typescript 或 javascript 编写一些代码来生成 html）。

   /li>

3. 现在将这些源导入并注入到您的组件中：

   和 ：

   /li>

4. 在组件类中定义 viewChild 变量：

   /li>

5. 写一个这样的函数：

   }

6. 您必须找到调用此函数的最佳位置，例如，ajax 数据回调是一种选择，并在其中调用 AfterEverything()。您可以在 ngAfterViewInit() 中调用此函数。

请注意，有时需要延迟几秒钟以确保创建所有新元素。

我使用动态组件加载器从由服务填充的数组中读取组件名称，然后在页面上加载组件。

我正在使用 API 的 loadIntoLocation 方法，但由于它不存在于最新版本的 angular 中，因此我需要将其替换为 @ViewChild 以获得最新版本。

这是我在使用 resolveComponent 动态添加组件的其他线程上找到的一个工作 plunker 示例。

（请参阅下方评论中的 plunker 链接。当我在移动设备上输入此内容时，我无法插入代码，没有代码我无法插入 plunker 链接）

但是，我想稍微改变一下实现。现在，app.ts 将要加载的组件数组传递给 Tabs 组件。在这里，我使用@ViewChild 来加载页面上的所有组件。

我想做的是，我还想从 app.ts 传递一个 @ViewChild 引用，以便我可以 <div #target></div> 在 App.ts 文件中定义：（组件应该在哪里呈现）。现在它存在于 Tabs.ts 中，但我不想在 Tabs 组件中定义它。我想让 Tabs.ts 作为其他组件可以用来动态加载其组件的各种基类。

因此，从本质上讲，每个组件都会有自己的模板，例如：

我有一个页面，上面有两个组件：

现在在 ck-auto-loan-calculator 我有一个按钮：(click)="showKeypad()"

showKeypad() 函数曾经有let k = this.app.getComponent('keypad');，这是访问<ck-keypad>组件

现在由于 ionic 更改为 beta 7 并且 angular 更改为 RC，我收到以下错误： ORIGINAL EXCEPTION: TypeError: Cannot read property 'setControl' of undefined

如何使键盘组件在 Ck-auto-loan-calculator 组件中可访问？

谢谢

这个 plnker可能是查看问题的最快方法

我不确定在使用 ViewChild 时是否只是一些明显的问题，但这很奇怪。

plunker 显示 3 个输入：

• 第一个输入是一个基本输入和一个可以聚焦它的按钮。
• 第二个输入绑定到相同的值，单击编辑将解锁输入。
• 第三个输入也绑定了相同的值，点击编辑将解锁输入并赋予它焦点。

但是，当添加 ViewChild 以获取对输入的引用时，输入上的 NgModel 绑定停止工作。但是您附加的任何其他绑定（如禁用）仍将继续起作用。如果您注释掉 app/extended.component 的第 52 行，它将再次绑定，但显然现在它无法聚焦。

第一个输入/按钮表明，这显然只是当您绑定到您正在扩展的类的属性时的问题。

简而言之，当我通过 ViewChild 访问输入时，我对 NgModel 的绑定会中断。

也就是说，给定一个具有属性“someValue”的基础： 绑定：

不绑定：

我正在尝试使用@ViewChild 访问子组件方法，它可以工作，但我也被迫加载它的模板，我不想这样做，因为这也迫使子组件OnInit, AfterViewInit和其他系统功能运行.

我希望它们仅在我在不同的场景中调用此子组件时运行，但我想在 AppComponent 中按需访问此子组件的自定义方法。

那么我该怎么做呢？

这是一个描述问题的 plunker：http: //plnkr.co/edit/FT6GTJ8mmUnyFxJAPbGV

你可以看到dashboards test() 函数被调用了，这就是我想要的，然而，它的ngOnInit 函数也被初始化了，这是我不想要的。

template: <h1>AppComponent</h1><my-dashboard></my-dashboard>

我虽然很明显<my-dashboard></my-dashboard>从 AppComponent 模板中删除，不加载仪表板模板，但是我得到了仪表板本身没有定义的错误（如果你删除<my-dashboard></my-dashboard>并再次运行 plunker，你可以看到错误）即使我已经包含它通过导入语句。

我错过了什么？

编辑 - - - - - - - - - - - - - - - - - - - - - - - - - -------------------------------------------------- --------------

因此，最后，您必须使用服务来存储可重用的数据/功能才能正常工作。

我正在尝试在 Ionic 2 中做一个小应用程序，但我无法导航...我已经阅读了文档、导航内容、navController、StackOverflow 上的一些帖子...我尝试了几个小时但我被卡住了！我有几个问题。

我必须找到一种方法来使用navController我的 app.js，这要感谢@viewChildStackOF。我不完全理解原理。我设置rootPage: any = Login;。由于我的应用程序上有一个菜单，因此我在此页面上禁用了它。在一个按钮(click)上，我this.nav.setRoot()使用HomePage. 现在从主页，在菜单中，我想浏览一些页面。我被困在这里。我用的(click)="openPage(Messagerie)"方法。第一个问题，openPage() 中的参数未定义。然后我按照文档尝试了[navPush]="pageMessagerie"andthis.pageMessagerie = Messagerie;方法，但效果不佳，没有任何反应。因此，我尝试将页面硬编码到我的 openPage() 函数中：this.nav.push(Messagerie);. 在这里，我又遇到了另一个问题。我第一次调用 push() 时，页面似乎立即出现和消失，回到 HomePage。我第二次点击，它似乎工作。我可以进入 Messagerie 页面，然后通过导航栏上的后退按钮返回主页。

所以......我在这里，坚持导航！我不知道该怎么办。这是我的代码。

更新 好的，未定义的现在可以了。但我的导航仍然表现得很奇怪。当我this.nav.push()在主页上使用时，我得到了这个工作流程：单击 Messagerie：打开 Messagerie 并立即返回主页。点击 Demandes ：打开 Messagerie，立即 Demandes 并留在那里。单击导航栏返回按钮：返回 Messagerie，返回 Demandes 并返回主页。当然，如果我this.nav.setRoot()每次都使用它，但我失去了导航原则。

应用程序.html

应用程序.ts

Login.ts（带有 setroot）

我错过了什么吗？我究竟做错了什么 ？非常感谢你的帮助 ！

我正在尝试访问本机元素，以便在单击另一个元素时专注于它（很像 html 属性“for” - for 不能用于这种类型的元素。

但是我得到了错误：

TypeError：无法读取未定义的属性“nativeElement”

我尝试对 nativeElement 进行 console.logngAfterViewInit()以便加载它，但它仍然会引发错误。

我还在 click 事件处理程序中访问 nativeElement ，以便在单击另一个元素时可以聚焦该元素 - 这可能是什么搞砸了，因为它在视图加载之前编译？

例如：

完整代码：

正在使用的 html 模板的相关部分：

组件.ts：

完整的 html 模板（可能无关紧要）：