Question

这是我的组件，error-handler.ts

@Component({
  selector: 'error-handler',
  templateUrl: 'error-handler.html'
})
export class ErrorHandlerComponent {

  @Input()
  error: string;

  constructor() {}

  ngOnChanges() {}
}

这是我的错误处理程序：

<div>
    <span> {{error}} </span>
</div>

这就是我在login.html中使用它的方式

<error-handler class="smallWidth" [error]=error></error-handler>

错误处理程序显示日志中收到错误，但我仍然看不到页面上显示的错误。在登录页面上：

if (this.platform.is('core')) {
    this.error = "ERROR";
    this.provider = new firebase.auth.GoogleAuthProvider();
    this.afAuth.auth.signInWithPopup(this.provider)
    .then((currentUser) => {
    })
}

所以，当我点击调用上述方法的登录按钮时，我可以看到我的错误div显示出来。以下代码也是从我的app.component.ts

运行的

  this.http.post(this.urlEnvironment.getUser(), objectToSend)
    .catch((error: any) => {
      this.error = "ERROR";
    })
    .subscribe((data: Response) => {
    )};

从上面我看到代码进入error-handler.ts并打印到日志，但错误div没有显示。上面是关闭我关闭的本地服务器，所以我看到代码进入catch块并将this.error设置为ERROR。

Answer 1

有关消防局的最新消息：

如果您需要触发错误消息以响应Firebase Auth，那么您更愿意创建UserService和ModalService。在UserService处理的Auth promise中，当发生错误时触发模态。

例如，您的UserService可能如下所示：

＆＃13;

// User service using email login

import { Injectable                 } from '@angular/core';
import { AngularFireAuth            } from 'angularfire2/auth';
import * as firebase from 'firebase';

import { ModalService               } from '@services/modal.service';

@Injectable()
export class UserService {

  constructor( private _fireAuth:  AngularFireAuth,
               private _modal:     ModalService ) {}

  login = ( email, password ) => {
    this._fireAuth.auth.signInWithEmailAndPassword( email, password )
    .then( () => ... do something with the user )
    .catch( ( error ) => this._modal.show( err ) );
  };
}

＆＃13;

这实际上取决于您需要对错误消息做什么（即应该有一个按钮来点击并触发操作然后......或者如果您需要自定义错误消息...）来说明模态服务/组件应该看起来像。

对数据绑定的原始答案： 尝试

<error-handler [error]=error></error-handler>

如果这无法帮助您使用docs on angular data binding

来应对您的应用数据和逻辑

但是看看你的例子，看起来你真的不需要太多的内部元素来处理那个错误，你可以把它简化为像

这样的东西。

<error-handler [innerHTML]=error_message></error-handler>

并使用：css中的主机选择器...

Answer 2

更好地开发这样的组件：

<div>
    <span><ng-content></ng-content></span>
</div>

然后像这样使用：

<error-handler>this place is your error message</error-handler>

或

<error-handler>{{error}}</error-handler>

Angular2，组件未显示

2 个答案: