在Angular2和TypeScript中发出自定义事件

Question

简而言之，我基本上是在嘲笑这个： http : //learnangular2.com/outputs/

这是我的工作：

1. 使用login.service.ts（axios模块）发送登录请求
2. 处理表单提交-如果成功的途径走了，否则显示问题模态
3. （在问题的情况下）显示ng2-bootstrap modal

因此，我将继续验证该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）绑定到消息模式指令。 下一步是从我的模态组件处理此事件。 见下面

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