通过嵌套组件调用父组件功能

时间:2017-10-11 19:29:30

标签: javascript angular components

我的Angular代码存在问题。我想从Component() Angular函数创建的嵌套组件中调用Parent组件的一个函数。

请参阅下面的代码:

import {
    Compiler, Component, ComponentRef, Injector, NgModule, NgModuleRef, ViewChild, ViewContainerRef
} from '@angular/core';
import { ActivatedRoute } from "@angular/router";
import { FormsModule, NgForm } from "@angular/forms";
import { HttpService } from './ht.service';

@Component({
  selector: 'app-module-routing',
  templateUrl: './module-routing.component.html'
})
export class ModuleRoutingComponent {

  @ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;
  private cmpRef: ComponentRef<any>;

  private module_name: string;
  private module_link: any;

  private module_links = [
        {"access": "salessalquoent", "link": "sales\/sales_order_entry.php?NewQuotation=Yes"},
    ];

  constructor(private compiler: Compiler,
                private injector: Injector,
                private m: NgModuleRef<any>,
                private route: ActivatedRoute,
                private httpService: HttpService) {}

  test() { //<-- Want to Call this function
      alert('function called successfully');
  }

  printPage(template, httpService, link) {

      const styles = [`input { width: 100px, display: block }`];
      const tmpCmp = Component({ template, styles }) (
          class {
              OnSubmit(form: NgForm) {
                  console.log(form);

                  this.ModuleRoutingComponent.test(); //<-- Want to call Parent Component function here

                  httpService.getPage(link, form.value)
                      .subscribe(
                          data => this.instance.printPage(data, httpService, link)
                      );
                  return false;
              };
          }
      );

      const tmpModule = NgModule({
          imports: [FormsModule],
          declarations: [tmpCmp]
      })(class {});

      this.compiler.compileModuleAndAllComponentsAsync(tmpModule)
          .then((factories) => {
              const f = factories.componentFactories[0];
              this.cmpRef = f.create(this.injector, [], null, this.m);
              this.cmpRef.instance.name = 'someForm';
              this.vc.insert(this.cmpRef.hostView);
          });
  }
}

请在代码中查看我的评论,您将看到我的意思:

//<-- Want to Call this function 

//<-- Want to call Parent Component function here

0 个答案:

没有答案