Question

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

以下是我的工作：

使用login.service.ts（axios module）发送登录请求
处理表单提交 - 如果成功路由，则显示带有问题的模态
（在问题的情况下）显示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);
      });
    }
  }
}

是的，所以从这个角度来看，我需要将我的事件绑定到我的child指令，以便我可以从我的子组件调用。见下文

<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）绑定到message-modal指令。下一步是从我的模态组件处理此事件。见下文

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中发出自定义事件

1 个答案: