ViewChild - Angular 2 Javascript答案

【问题标题】：ViewChild - Angular 2 JavascriptViewChild - Angular 2 Javascript
【发布时间】：2016-06-21 05:51:20
【问题描述】：

如何在 Angular 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

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

【问题讨论】：

你可以在这里看到一个例子stackoverflow.com/a/34573219/4933038

标签： angular angular2-routing angular2-template angular2-directives angular2-services

【解决方案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();
  }
});

【讨论】：

又是你！谢谢和爱。我已经尝试了您的代码，并且可以 100% 正常工作。我理解了您的代码，发现我的应用程序中存在的问题是我使用了 Routing。我不在模板中加载组件。我使用ng.router.RouteConfig 在<router-outlet></router-outlet> 中加载组件。因此我无法在ngAfterViewInit中查看孩子
不客气！关于您的最后一个问题，您尝试从使用router-outlet 的组件中引用在router-outlet 中加载的组件。对吗？
是的。我不在 directives 中加载组件。我使用 ng.router.RouteConfig 加载组件。我已经编辑了这个问题。请检查一下。你会知道我做了什么。
好的，我知道了。实际上，子组件是在调用ngAfterViewInit 方法后加载到router-outlet 中的。因此，viewChild1Component 属性应该稍后使用（单击时）。我更新了我的答案...
现在工作正常。非常感谢。我还需要你的 1 点帮助。我想知道如何在 Javascript 中使用 CanActivate。 My Post regarding CanActivate。这是我发布的链接。请检查这个并帮助我解决问题