- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在将我的 ionic 2 应用程序迁移到删除了 app.getComponent 的 RC 版本。在他们的 github 发行说明中,他们谈到了使用 ViewChild,我该如何正确使用它?
之前(在 RC 版本之前工作):
openPage(page) {
this.app.getComponent('leftMenu').close();
// navigate to the new page if it is not the current page
let nav = this.app.getComponent('nav');
nav.setRoot(page.component);
}
之后:
@Component({
templateUrl: 'build/app.html',
queries: {
leftMenu: new ViewChild('leftMenu'),
nav: new ViewChild('content')
}
})
....
openPage(page) {
// close the menu when clicking a link from the menu
this.leftmenu.close();
// navigate to the new page if it is not the current page
this.nav.setRoot(page.component);
}
我试图获取“leftMenu”组件,但没有成功。我得到的错误是
browser_adapter.js:77 ORIGINAL EXCEPTION: TypeError: Cannot read property 'close' of undefined
最佳答案
在 Conference App 中是如何完成的(并稍微更改它以简化代码):
import {Component, ViewChild} from '@angular/core';
import {ionicBootstrap, ..., Platform, MenuController} from 'ionic-angular';
...
@Component({
templateUrl: 'build/app.html',
queries: {
nav: new ViewChild('content')
}
})
class ConferenceApp {
static get parameters() {
return [[...], [Platform], [MenuController]]
}
constructor(..., platform, menu) {
this.menu = menu;
// Call any initial plugins when ready
platform.ready().then(() => {
...
});
openPage(page) {
this.menu.close();
this.nav.setRoot(page);
}
}
ionicBootstrap(ConferenceApp, [...], {
// config
});
据我所知,你可以使用MenuController
的实例来执行close()
方法并隐藏侧边菜单。
如果您需要此代码的 TypeScript 版本,只需添加评论,我会更新答案,不想添加它以保持答案简短。
关于angular - ionic 2 : How to use ViewChild instead of app. getComponent,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37694502/
我目前正在学习 angular ViewChild,但在使用 ViewChild 从 DOM 选择自定义引用变量时,我似乎遗漏了一些东西。 在我的模板中有两个表: 我正在尝试针对每个对象进行排序:
在我的组件中,我有以下内容: @ViewChild('PaginatedTableComponent') userTable: PaginatedTableComponent; 在这个组件中,我有以下
我正在使用父子组件。在子组件中,我使用搜索框。我需要随时按需获取搜索框值。如何获得? 子组件 html - GridViewComponent 父组件 ts @ViewChild(GridviewC
我有两个组件,一个 videoComponent 和 videoControlsComponent。视频组件包含 元素和视频组件有一些按钮来操作 videoComponent 元素。 You
我想在我的 HTML 中打印一个 10x10 的网格。为此,我在我的 html 中使用了两个 ngFor。在我的 TypeScript 组件中,我想使用 @ViewChild 访问此表的单元格以将光标
在我的 Angular 应用程序中,我的 @ViewChild 实例无法填充 HTL matSort。 我的组件.ts: import { MatSort } from '@angular/mater
基本上不是这样做: class Controller implements AfterViewInit{ @ViewChild(IconComponent) iconComponent: Ic
我已经检查了这个问题的其他答案,但到目前为止似乎没有任何帮助。我正在尝试在 ionic 2 应用程序中显示 map 。但是当我尝试选择 #map 时div 它返回未定义。这是代码 page1.html
出于某种原因,我的 Angular 5 应用程序中的 @ViewChild 无法正常工作。我在我的组件中这样定义它: case-detail.component.html: 我在我的 C
我有这样一个组件: export class ParentComponent implements OnInit, OnDestroy { @ViewChild(ChildComponent)
我有一个名为 EasyBoxComponent 的组件,和一个带有此 @Viewchild 的 @Directive: @ViewChild(EasyBoxComponent) myComponent
需要帮助来理解以下语句中 {read: ViewContainerRef} 的含义。 @ViewChild('myname', {read: ViewContainerRef}) target; 最佳
在以前的angular版本中,我们可以像这样定义一个带有元素ref的viewchild @ViewChild('fileInput') fileInput: ElementRef; 现在我们必须在构造
Angular v8 刚刚发布。虽然它主要是向后兼容的,但还是有一些突破性的变化。 根据 Angular 的 Changelog一个核心变化是(我引用): “在 Angular 版本 8 中,要求所有
我在使用 @ViewChild 和通过 ngIf 显示的组件时遇到问题。我找到了各种解决方案,但没有一个对我有用。 这是我的主要组件,由多个步骤(为了简洁起见,我只在代码中显示 2 个)和一个用于向前
我正在尝试获取 audio组件内的元素。起初我是用老式的方式做的: $player: HTMLAudioElement; ... ngOnInit() { this.$player = docum
这个问题已经有答案了: What are all the valid selectors for ViewChild and ContentChild? (2 个回答) 已关闭 4 年前。 在本文中C
如果我的 fileInput 元素在一个普通的 div 中,那么它工作正常。但是如果我把它放在 里面然后我得到它未定义。 这是我的代码: HTML Modal title
我目前正在开发一个项目,我需要根据组件传递一些@input值。因此,该指令将相应地发挥作用。但问题是我无法获得该指令的引用。相反,我只得到了 elementRef 作为返回。请参阅下面的 stackb
我是 angular2 的新手,并不专业。我有一个父子组件,当用户单击按钮时,我希望子组件的选择器显示一些内容。所以它应该是条件,并且它也是从子组件中使用的。这是我的代码:父级 HTML:
我是一名优秀的程序员,十分优秀!