Испустите пользовательское событие в Angular2 и машинопись

Question

Короче говоря, я в основном издевались это: http://learnangular2.com/outputs/

Вот что я делаю:

1. Отправить Войти Запрос с использованием login.service.ts (модуль Вардар)
2. Handle формы представить - если успех маршрут далеко еще дисплей модальный с выпуском
3. (в случае выдачи) дисплей NG2-самозагрузки модального

Итак, я продолжу и убедитесь, что API работает правильно, я могу вызвать сбой, отправив плохие кредиты, без проблем. Теперь у меня есть сбой, я хочу показать хорошо выглядящие модальные объяснения, что произошло с запросом пользователей. Ниже мои 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); 
     }); 
    } 
    } 
} 

правой, так что с этой точки зрения, я должен был бы связать мое событие моей директивы ребенка, так что я могу быть позвонить с моего ребенка компонента. См. Ниже

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

Здесь нет проблем, верно? Я привязал настраиваемое событие (т.е. authFailed) к директиве mod-message. Следующий шаг - обработать это событие из моего модального компонента. Смотрите ниже

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) 
    } 
} 

Итак, с этого момента, я должен видеть линию в моей консоли, подобной «DEBUG 401» или что-то в этом роде. Не повезло; эта линия никогда не называется.

Answer 1

Событие authFailed принадлежит к компоненту Login, но вы добавили слушателя в MessageModal - он не будет работать.

В вашем случае MessageModal находится в пределах Login компонента, так что вы могли бы назвать это непосредственно без событий:

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