ViewChild角2 Javascript
ViewChild角2 Javascript
提问于 2016-03-07 15:39:50
如何在角2 Javascript中使用ViewChild？我已经引用了angular.io文档，并且我尝试了下面的代码，但它不起作用。有谁可以帮我？提前谢谢。
main.html
<router-outlet></router-outlet>app.component.js
(function (app) {
app.AppComponent = ng.core
.Component({
selector: 'my-app',
templateUrl: 'app/views/main.html',
directives: [ng.router.ROUTER_DIRECTIVES], //<----not loading components here
viewProviders: [ng.http.HTTP_PROVIDERS],
queries: {
'viewChild1Component': new ng.core.ViewChild(app.Child1Component) //Parent calls Child 1 using ViewChild
},
})
.Class({
constructor: [ng.router.Router, ng.http.Http, function (router, http) {
this.router = router;
this.http = http;
}],
ngAfterViewInit: function () {
this.viewChild1Component.onSubmit();
},
});
ng.router
.RouteConfig([
//loading components here
{ path: '/child1', component: app.Child1Component, name: 'Child 1', useAsDefault: true },
])(app.AppComponent);
})(window.app || (window.app = {}));child1.js 1.js
(function (app) {
app.Child1Component = ng.core
.Component({
selector: 'test',
template: '<div>Test</div>',
})
.Class({
constructor: [ng.router.Router, function (router) {
this.router = router;
}],
onSubmit: function () {
alert('Call from Parent');
},
});
})(window.app || (window.app = {}));index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 1. Load libraries -->
<script src="scripts/traceur-runtime.js"></script>
<script src="scripts/system.js"></script>
<!-- IE required polyfill -->
<script src="scripts/es6-shim.min.js"></script>
<script src="scripts/angular2-polyfills.js"></script>
<script src="scripts/Rx.umd.js"></script>
<script src="scripts/angular2-all.umd.js"></script>
<!--components-->
<script src="app/components/child1.js"></script>
<script src="app/components/child2.js"></script>
<!-- 2. Load our 'modules' -->
<script src='app/app.component.js'></script>
<script src='app/boot.js'></script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2016-03-07 18:42:52
您需要将字段定义为组件元数据的queries属性，如下所述：
var AppComponent = ng.core.
Component({
selector: "app",
template:
'<div>' +
' <test></test>' +
'</div>',
queries: {
'subComponent': new ng.core.ViewChild(TestComponent) <-----
},
directives: [ TestComponent ]
})
.Class({
constructor: function() {
},
ngAfterViewInit:function(){
this.subComponent.onSubmit();
}
});subComponent将在调用ngAfterViewInit钩子之前设置。
前面的代码依赖于下面的TestComponent
var TestComponent = ng.core.Component({
selector:'test',
template: '<div>Test</div>'
}).Class({
constructor: function(){
},
onSubmit: function(){
console.log('onSubmit');
}
});编辑
在你的情况下，你利用路由。这意味着您的viewChild1Component属性将在调用ngAfterViewInit方法之后进行设置，因为Child1Component组件是随后加载在router-outlet中的。事情是动态的事实上..。
如果您在后面使用viewChild1Component属性(例如单击)，这将起作用.见下面的样本：
app.AppComponent = ng.core.
Component({
selector: "app",
template:
'<div>' +
' <router-outlet></router-outlet>' +
' <div (click)="submit()">Submit</div>' +
'</div>',
queries: { 'viewChild1Component': new ng.core.ViewChild(Child1Component) },
directives: [ng.router.ROUTER_DIRECTIVES]
})
.Class({
submit: function() {
console.log('#### submit');
this.viewChild1Component.onSubmit();
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35847818
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号