ViewChild-Angular 2 Javascript [英] ViewChild - Angular 2 Javascript
问题描述
如何在Angular 2 Javascript中使用 ViewChild ?我已经引用了 angular.io 文档，并且尝试使用以下代码，但该代码无法正常工作.谁能帮我?预先感谢.
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>
推荐答案
您需要将字段定义为组件元数据的queries属性，如下所述:
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();
}
});
subComponent将在调用ngAfterViewInit挂钩之前设置.
The subComponent will set before the ngAfterViewInit hook is called.
以前的代码依赖于以下TestComponent:
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');
}
});
修改
在您的情况下，您可以利用路由.这意味着您的viewChild1Component属性将在调用ngAfterViewInit方法之后设置，因为Child1Component组件将被加载到router-outlet之后.事情实际上是动态的...
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...
如果您之后使用了viewChild1Component属性(例如单击)，则可以使用...请参见下面的示例:
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屋！
