कोणीय 2 EventEmitter

Question

मुझे कोई समस्या है जहां EventEmitter मूल घटक के मान को आउटपुट नहीं करता है। यहां बताया गया है कि मैं कैसे सेटअप कर रहा हूं।

main.component.ts (लघु संस्करण)

...  

@Component({ 
selector: 'my-app', 
templateUrl: '/app/views/main.ejs', 
directives: [ROUTER_DIRECTIVES], 
providers:[AuthService], 
inputs:['userLoggedIn'] 
}) 

@RouteConfig([ 
{path:'/logout', name: 'Logout', component: AuthComponent}, 

]) 

export class AppComponent implements OnInit, CanReuse{ 

    constructor(private _auth_service: AuthService){ 

     this._auth_service.authChanged.subscribe(data=>this.authChangedHandler(data)); 

    } 

    public authChangedHandler($event){ 

     alert($event); 

    } 

} 

... 

auth.component.ts (लघु संस्करण)

export class AuthComponent implements OnInit, CanReuse{ 

public loggedIn = false; 

public user = {}; 

@Output() 
authChanged: EventEmitter<string>; 

public selectedTab = "/login"; 

    constructor(private _router: Router, private _location:Location,private _http: Http, private _auth_service: AuthService){ 

     this.authChanged = new EventEmitter(); 

     this.authChanged.emit("authChanged"); 

    } 

} 

main.ejs (लघु संस्करण)

<nav (authChanged)="authChangedHandler($event)"></nav> 
<router-outlet></router-outlet> 

,210

auth.service.ts

export class AuthService { 

public authChanged: EventEmitter<string>; 

constructor(private _http: Http){ 

    this.authChanged = new EventEmitter(); 
    this.authChanged.emit("authChanged"); 

    } 

} 

संपादित करें: मैं AuthService कोड है जो मैं मुख्य घटक में इंजेक्षन जोड़ लिया है। यह अब काम करना चाहिए लेकिन नहीं करता है।

Answer 1

EventEmitter द्वारा उत्सर्जित घटनाएं बबल नहीं होती हैं। यदि तत्व router-outlet में जोड़ा गया है तो केवल router-outlet ईवेंट प्राप्त करता है लेकिन router-outlet युक्त तत्व नहीं है।

आप माता-पिता और बच्चे तत्व के बीच संवाद करने के लिए साझा सेवा का उपयोग कर सकते हैं।

साझा सेवा के लिए

• https://github.com/escardin/angular2-community-faq/blob/master/services.md#how-do-i-communicate-between-components-using-a-shared-service
• Global Events in Angular 2

देखते हैं कि आप माता-पिता घटक के providers: [] सूची में साझा सेवा पंजीकृत करते हैं, सेवा केवल पेरेंट तत्व के बीच साझा किया जाता है और इसके सभी वंशज। यदि आप इसे केवल bootstrap(MyApp, [ ..., SharedService]) पर जोड़ते हैं तो संपूर्ण एप्लिकेशन एक उदाहरण साझा करता है।

Answer 2

वास्तव में, navAuthComponent एक का मूल घटक नहीं है। उत्तरार्द्ध रूटिंग में शामिल है (router-outlet देखें)। यही कारण है कि आप HTML में nav तत्व पर पंजीकृत अभिव्यक्ति के लिए ईवेंट प्राप्त नहीं कर सकते हैं।