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

Question

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

这是我的做法：

使用 login.service.ts（axios 模块）发送登录请求
处理表单提交 - 如果成功路由，否则显示有问题的模态
（在问题的情况下）显示 ng2-bootstrap 模态

所以，我会继续验证 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);
 });
 ....

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

Emit custom event in Angular2 and TypeScript

angular

typescript

eventemitter