ViewChild - Angular 2 Javascript

Question

如何在 Angular2Javascript 中使用 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

(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>

Answer 1

您需要将字段定义到组件元数据的 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();
  }
});

ViewChild - Angular 2 Javascript

ViewChild - Angular 2 Javascript

angular

angular2-routing

angular2-template

angular2-directives

angular2-services