Açısal 2: Başka bir bileşenden mevcut bileşeni arayın

Question

Yönlendirme özelliklerini kullanarak Angular 2 ile bir uygulama oluşturuyorum ve daha yüksek yollardan biri tarafından oluşturulan bir açılır pencere bileşenim var ve bunu açmak istiyorum Daha derin yollardan biri tarafından oluşturulan bir bileşendeki tıklama olayı.

@Component({ 
    selector: 'popup-component', 
    template: '<div [class.show]="isVisible">This is a popup.</div>' 
}) 
export class PopupComponent { 
    public isVisible: boolean = false; 
    show() { 
     this.isVisible = true; 
    } 
} 

Bunu çağırabilirsiniz Nasıl: Açık bir yöntemle

@Component({ 
    selector: 'application', 
    template: '<router-outlet></router-outlet><popup-component></popup-component>', 
    directives: [PopupComponent] 
}) 
@RouteConfig([ 
    { ... }, 
    { ... } 
]) 
export class AppRoute { } 

Ve basit bir pop-up bileşeni: Örneğin

, bu reklam pop-up içeren bir şablonla bir taban yönlendirici var diyelim Yönlendirme ağacında bir yerde bulunan başka bir bileşenden AppRoute tarafından zaten oluşturulmuş olan belirli bir PopupComponent yöntemini göster? Böyle bağımlılık enjeksiyon kullanılarak denedi

:

@Component({ 
    selector: 'my-component', 
    template: '<button (click)="showPopup()"></button>' 
}) 
export class MyComponent { 
    constructor(private popup: PopupComponent) { } 
    showPopup() { 
     this.popup.show(); 
    } 
} 

Ama bu sadece aslında henüz oluşturulmamışsa PopupComponent yeni bir örneğini oluşturur. AppRoute tarafından oluşturulanı nasıl arayabilirim?

Answer 1

Sen popup-component hizmet enjekte ve gösteri konuya abone

import {Injectable} from 'angular2/core'; 
import {Subject} from 'rxjs/Rx'; 
export class PopupService{ 
    show:Subject<boolean> = new Subject(); 
} 

AppRoute

@Component({ 
    providers:[PopupService], 
    selector: 'application', 
    ... 
]) 
export class AppRoute { } 

yılında sağlayıcılarına hizmet ekle paylaşılan servis istiyorum.

@Component({ 
    selector: 'popup-component', 
    template: '<div [class.show]="isVisible">This is a popup.</div>' 
}) 
export class PopupComponent { 
    public isVisible: boolean = false; 
    constructor(private popup: PopupService) { 
     popup.show.subscribe((val:boolean) => this.isVisible = val); 
    } 
} 

Eğer show konuda next diyoruz, açılır pencere göstermek istiyorum herhangi bir bileşene bunu enjekte;

@Component({ 
    selector: 'my-component', 
    template: '<button (click)="showPopup()"></button>' 
}) 
export class MyComponent { 
    constructor(private popup: PopupService) { } 
    showPopup() { 
     this.popup.show.next(true); 
    } 
}