如何在angular2中注入組件實例

假設我想實現一個lightbox組件，該組件使用<dialog>來呈現其內容。喜歡的東西：如何在angular2中注入組件實例

@Component({ 
    selector: 'image-popup', 
    template: ` 
    <dialog> 
    ... 
    </dialog> 
` 
}) 
export class ImagePopupComponent { 
... 
    show(): void { 
    this.element.nativeElement.showModal(); 
    } 
}

如果我在主應用程序組件創建的這個實例，我怎麼能允許從其他組件其訪問。例如，在一些後代組件中，我有一個按鈕，我希望點擊觸發此對話框實例上的show（）。在我的用例中，這個組件將具有一個imageUrl屬性，並且多次使用相同的組件來顯示不同的圖像。

來源

2016-02-20 aptik

使用共享的服務。有大量類似的問題與答案。 –

馬丁的評論看起來是正確的。請注意，默認情況下，服務注入是單身人士。因此，您將在所有組件中接收到「MyModalService」的相同實例。 –

您可以使用此服務。

@Injectable() 
export class MyModalService { 
    component: MyModal; 
} 

@Component({ 
    selector: 'my-modal', 
}) 
export class MyModal { 
    constructor(private element: ElementRef, modalService: MyModalService) { 
     modalService.component = this; 
    } 

    show(): void { 
     this.element.nativeElement.showModal(); 
    } 
}

然後，在一些其它部件：

@Component({ 
    selector: 'another', 
}) 
export class AnotherComponent { 
    constructor(private _modalService: MyModalService) { 
    } 

    buttonClicked() { 
     this._modalService.show(); 
    } 
}

來源

2016-02-20 16:35:51 martin

使用此方法，MyModal模板會自動呈現嗎？例如，如果MyModal使用引導模式，並且使用this.element.nativeElement.modal（），則引導模式是否會自動顯示？ –

如何在angular2中注入組件實例

回答

相關問題