ViewChild - Angular 2 Javascript

问题

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>

回答1:

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();
  }
});

来源：https://stackoverflow.com/questions/35847818/viewchild-angular-2-javascript

标签

angular

angular2-routing

angular2-template

angular2-directives

angular2-services