通知Angular2サービスの作成

Question

Angular2/Ionic2の新機能です。通知の種類のサービスを作成しようとしましたが、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

あなたはにバインドする必要がありそれ以外の場合は、htmlは実行時に更新されません。新しいコンポーネントを作成して、メッセージプロパティを入力として受け取り、その子コンポーネントにデータを表示することができます。

//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  

}