Question

我是Angular2 / Ionic2的新手，尝试创建Notification类服务，但是在理解setTimeout完成后通知消息未更新的原因时遇到了麻烦。因此，消息获取值但在setTimeout之后不会被清除。请查看代码并给我挖掘的方法。

服务代码：

import {Injectable} from '@angular/core';


@Injectable()
export class NotificationService {
    public message: string = "";
    public interval: number = 2000;
    public type: boolean = true;

    constructor() {
    }

    public manageMessage(message: string, interval: number, type: boolean) {
        this.message = message;
        this.interval = interval;
        this.type = type;

        setTimeout(
            () => {
                this.message = "";
console.log("cleared");
            },
            this.interval);

        return this.message;
    }
}

注册组件代码：

import { Component } from '@angular/core';
import 'rxjs/Rx';
import { BackandService } from '../../providers/backandService';
import { NotificationService } from '../../providers/notificationService';

@Component({
  templateUrl: 'signup.html',
  selector: 'page-signup',
})
export class SignupPage {

  email:string = '';
  firstName:string = '';
  lastName:string = '';
  signUpPassword: string = '';
  confirmPassword: string = '';
  message: string = '';

  constructor(private backandService:BackandService, private notificationService: NotificationService) {

  }

  public signUp() {
    if (this.signUpPassword != this.confirmPassword){
      alert('Passwords should match');
      return;
    }
    var $obs = this.backandService.signup(this.email, this.signUpPassword, this.confirmPassword, this.firstName, this.lastName);
    $obs.subscribe(
      data => {
          this.email = this.signUpPassword = this.confirmPassword = this.firstName = this.lastName =  '';
      },
      err => {
          this.backandService.logError(err);
          let messageArray : any;
              try {
                  messageArray = JSON.parse(err._body);
              } catch (e) {
                  messageArray = err._body;
              }

          this.message = this.notificationService.manageMessage(messageArray.error_description, 2000, true);

          this.email = this.signUpPassword = this.confirmPassword = this.firstName = this.lastName =  '';
      },
      () => console.log('Finish Auth'));


  }

使用表单注册html模板代码：

<ion-item>
    <ion-label floating>Confirm Password</ion-label>
    <ion-input type="password" [value]="confirmPassword" (input)="confirmPassword = $event.target.value"></ion-input>
</ion-item>

<div class="message-box" *ngIf="message">
    <p>{{message}}</p>
</div>

<button ion-button (click)="signUp()" color="success">Sign Up</button>

Answer 1

你必须绑定到message属性，否则html将不会在运行时更新。你可以创建一个新的组件，它将message属性作为输入加入并在该子组件中显示数据。

//child component. message property is minded to this component.
import { Component, Input } from '@angular/core';

@Component({
  selector: ‘message-comp’,
  template: `
    <div>
    {{message}}      
    </div>
  `
})
export class CounterComponent {
  @Input()
  message: string = “”;
}

-----------------------------------------------------------
//parent component this creates  message-comp passing the message
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div class="app">
      <message-comp [message]=“message”></message-comp>
    </div>
  `
})
export class AppComponent {
  message: string = “”;

  //you can have functions which will
  //change message,since message property is binded to ‘message-comp’
  //you can access message within that component easily and will get updated when you change it from the
  //parent component    

}

创建通知Angular2服务

1 个答案: