動態組件點擊事件綁定 - 角2

Question

有可能重複的機會，但我的情況有點不同。

我想爲我的動態組件執行點擊事件。

這裏是我的結構：

 <razor> 
      <mvc-partial> 
      <dynamic-html> // buttonPress(){console.log("Function called in dynamicHtml) 
          // Output() to call function in razor.ts 
      </dynamic-html> 
      </mvc-partial> 
     <razor> 

RenderingViewDynamic.ts文件

import { 
    Component, 
    Directive, 
    NgModule, 
    Input, 
    Output, 
    EventEmitter, 
    ViewContainerRef, 
    Compiler, 
    ComponentFactory, 
    ModuleWithComponentFactories, 
    ComponentRef, 
    ReflectiveInjector, OnInit, OnDestroy, ViewChild 
} from '@angular/core'; 

import { RouterModule } from '@angular/router'; 
import { CommonModule } from '@angular/common'; 
import { Http } from "@angular/http"; 
import 'rxjs/add/operator/map'; 

export function createComponentFactory(compiler: Compiler, metadata: Component): Promise<ComponentFactory<any> | undefined>{ 
    console.log(compiler) 
    console.log(metadata) 
    class DynamicComponent { 
     @Output() buttonType: EventEmitter<string> = new EventEmitter<string>() 

     // button click operation 
     buttonPress() { 
      this.buttonType.emit(); 
     } 
    }; 
    const decoratedCmp = Component(metadata)(DynamicComponent); 

    @NgModule({ imports: [CommonModule, RouterModule], declarations: [decoratedCmp] }) 
    class DynamicHtmlModule { } 

    return compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule) 
     .then((moduleWithComponentFactory: ModuleWithComponentFactories<any>) => { 
      console.log(decoratedCmp) 
      console.log(moduleWithComponentFactory.componentFactories.find(x => x.componentType === decoratedCmp)) 
      return moduleWithComponentFactory.componentFactories.find(x => x.componentType === decoratedCmp); 
     }); 
} 

@Component({ 
    selector: 'mvc-partial', 
    template: `<div #dynamicHtml></div>` 
}) 
//@Directive({ selector: 'mvc-partial' }) 
export class RenderingViewDynamic implements OnInit { 
    @ViewChild('dynamicHtml', { read: ViewContainerRef }) target: ViewContainerRef; 
    html: string = '<p></p>'; 
    @Input() url: string; 
    cmpRef: ComponentRef<any>; 

    constructor(private vcRef: ViewContainerRef, private compiler: Compiler, private http: Http) { } 

    ngOnInit() { 
     this.http.get(this.url) 
      .map(res => res.text()) 
      .subscribe(
      (html) => { 
       this.html = html; 
       if (!html) return; 

       if (this.cmpRef) { 
        this.cmpRef.destroy(); 
       } 

       const compMetadata = new Component({ 
        selector: 'dynamic-html', 
        template: this.html, 
       }); 

       createComponentFactory(this.compiler,compMetadata) 
        .then(factory => { 
         //const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector); 
         this.cmpRef = this.target.createComponent(factory!); 
        }); 
      }, 
      err => console.log(err), 
      () => console.log('MvcPartial complete') 
      ); 

    } 

    ngOnDestroy() { 
     if (this.cmpRef) { 
      this.cmpRef.destroy(); 
     } 
    } 

} 

razor.component.html

<mvc-partial [url]="'/View/Index'" (buttonType)="click()"></mvc-partial>

razor.component.ts

click(){ console.log("In razor") }

我的問題是，按鈕是在我的動態-HTML要綁定它的事件功能在razor.ts。

like <dynamic-html>-<mvc-partial>-<razor>我怎麼能實現它？

更新：試圖與服務

class DynamicComponent { 
     constructor(private appService: AppService) { } 

     buttonPress() { 
      this.appService.onButtonClickAction.emit() 
     } 
    }; 
    const decoratedCmp = Component(metadata)(DynamicComponent); 

    @NgModule({ imports: [CommonModule, RouterModule], declarations: [decoratedCmp], providers: [AppService] }) 

錯誤溝通彈出：無法解析DynamicComponent所有參數：（？）。

clickEmitter = new EventEmitter(); 

clickEmitter.emit(); 

<your-child-component (clickEmitter)="functionInParent()"></your-child-component> 

編輯：

上述錯誤加入@Inject(forwardRef(() => AppService)

constructor(@Inject(forwardRef(() => AppService)) private appService: AppService) { } 

Answer 1

你可以泡了，從你的孩子你的父母click事件通過EventEmitter解決如果您想按照您的評論訪問您的孩子組件：<dynamic-html>-<mvc-partial>-<razor>您可以參考使用＃標籤的主題標籤（＃）和名字的部件或組件名稱

@ViewChild(MvcPartialComponent) mvcPartialComponent: MvcPartialComponent; 

<mvc-partial #mvc-partial></mvc-partial> 
@ViewChild('mvc-partial') mvcPartialComponent: MvcPartialComponent; 

等等等等