'+' <路由器插座></路由器插座>'+' <div (click)="submit()">提交</div>'+'</div>',查询:{'viewChild1Component': new ng.core.ViewChild(Child1Component) },指令:[ng.router.ROUTER_DIRECTIVES]}).班级({提交:函数(){console.log('####提交');this.viewChild1Component.onSubmit();}});
How can I use ViewChild in Angular 2 Javascript? I have referred angular.io docs and I have tried with the following code and it is not working. Can anyone help me? Thanks in advance.
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
(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>
解决方案
You need to define your field into the queries attribute of your component metadata, as described below:
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();
}
});
The subComponent will set before the ngAfterViewInit hook is called.
The previous code relies on the following TestComponent:
var TestComponent = ng.core.Component({
selector:'test',
template: '<div>Test</div>'
}).Class({
constructor: function(){
},
onSubmit: function(){
console.log('onSubmit');
}
});
Edit
In your case, you leverage routing. This means that your viewChild1Component property will be set after the call of the ngAfterViewInit method since the Child1Component component is loaded in the router-outlet after. Things are dynamic in fact...
If you use the viewChild1Component property after (on a click for example), this will work... See the sample below:
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();
}
});
这篇关于ViewChild - Angular 2 Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
