Emit benutzerdefinierte Ereignis in Angular2 und Typoskript

Question

Kurz gesagt, ich habe dies im Grunde verspottet: http://learnangular2.com/outputs/

Hier ist, was ich tue:

1. Senden Login-Anfrage mit login.service.ts (axios Modul)
2. das Formular Griff einreichen - wenn der Erfolg Route weg anderes Display modal mit Ausgabe
3. (im Falle der Ausstellung) Anzeige NG2-Bootstrap-modal

Also, ich werde weitermachen und überprüfen, dass die API richtig funktioniert, kann ich einen Fehler durch Senden schlechter Krediten auslösen, kein Problem. Nun, ich habe einen Fehler, ich möchte eine gut aussehende Modal erklären, was mit einer Benutzeranfrage passiert ist. Das unten ist mein login.component.ts

@Component({ 
    selector: 'login', 
    encapsulation: ViewEncapsulation.None, 
    styles: [require('./login.scss')], 
    template: require('./login.html'), 
    providers: [LoginService,LoginRouteGuard] 
}) 
export class Login { 

    public form:FormGroup; 
    public email:AbstractControl; 
    public password:AbstractControl; 
    public submitted:boolean = false; 
    private router:Router; 
    @Output() authFailed = new EventEmitter(); 

    constructor(fb:FormBuilder, private loginService: LoginService, router: Router) { 
    // ...stripping bc it doesnt really matter 
    } 

    public onSubmit(values:Object):void { 
    this.submitted = true; 
    if (this.form.valid) { 
     this.loginService.post(this.email.value,this.password.value).then((token:string)=>{ 
     //store cookies/manage session then redirect 
     },(err:Object)=>{ 
     if(err.response.status) this.authFailed.emit(err.response.status); 
     }); 
    } 
    } 
} 

Richtig, also aus dieser Perspektive, ich müsste meinen Fall mein Kind Richtlinie binden, so dass ich von meinem Kind Komponente nennen werden kann. Siehe unten.

<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal"> 
    <!-- removed my form to shorten question --> 
</form> 
<message-modal (authFailed)="handleAuthFailure($event)"></message-modal> 

Kein problem hier, oder? Ich habe ein benutzerdefiniertes Ereignis (dh authFailed) an die message-modal-Direktive gebunden. Der nächste Schritt besteht darin, dieses Ereignis mit meiner modalen Komponente zu behandeln. Siehe unten

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'message-modal', 
    template: require('./modal.html'), 
    styles: [require('./modal.scss')], 
}) 
export class MessageModal{ 

    public content:Object = {header:'Message Modal' ,body:'Body Content'}; 

    constructor(){} 

    public handleAuthFailure(code){ 
     console.log('DEBUG', code) 
    } 
} 

Also, von diesem Punkt sollte ich eine Linie in meiner Konsole ähnlich wie „DEBUG 401“ oder etwas Ähnliches sehen werden. Kein Glück; Diese Zeile wird nie aufgerufen.

Answer 1

Ereignis authFailed gehört zu Login Komponente, aber Sie hinzugefügt Hörer zu MessageModal - es wird nicht funktionieren.

In Ihrem Fall MessageModal ist innerhalb Login Komponente, so dass Sie es ohne Ereignisse direkt nennen könnte:

//Login component 
@ViewChild(MessageComponent) message:MessageComponent 
.... 
(err:Object)=>{ 
    if(err.response.status) this.message.handleAuthFailure(err.response.status); 
}); 
....