Angular2，组件未显示

Question

This is my component, error-handler.ts

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

  @Input()
  error: string;

  constructor() {}

  ngOnChanges() {}
}

This is my error-handler.html:

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

This is how I'm using it in login.html

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

error-handler shows that error is received in the logs, but I still don't see my error being displayed on the page. On the login page:

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

So when I click login button which calls my above method, I can see my error div show up. The below code is also running from my app.component.ts

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

From the above I see the code going into the error-handler.ts and printing to the logs, but the error div doesn't get displayed. Above is hitting my local server which is turned off so I see that the code does go into the catch block and sets the this.error to ERROR.

Answer 1

UPDATE TO NEW QUESTION ABOUT FIREBASE AUTH:

If you need to trigger error message in reaction to Firebase Auth, then you rather create UserService and ModalService. In Auth promises handled by UserService trigger the modal when error occurs.

For example your UserService may look like this:

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

It really depends what you need to do with the error message (ie. should there be a button to click and trigger action then ... or if you need custom error messages ...) to say how the Modal Service / Component should look like.

---

ORIGINAL ANSWER TO DATA BINDING: try

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

if that does not help confront your app data and logic with docs on angular data binding

But looking into your example, it seems you really do not need much of inner elements for that error, you can probably reduce it into something like

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

and just style it using :host selector in you css ...

Answer 2

better you develope component like this:

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

and then use like this:

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

or

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