创建通知Angular2服务
问题描述:
我是Angular2/Ionic2中的新成员,尝试创建Notification类服务,但在理解setTimeout完成后未更新通知消息的原因时遇到困难。所以消息得到的值,但setTimeout后不清除。请查看代码,并给我挖掘的方式。创建通知Angular2服务
服务代码:
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>
答
你必须绑定到message
属性,否则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
}
+0
谢谢,说实话我已经尝试了这种方法,但没有运气...可能是因为我在Angular2中没有那么有经验。你有任何其他想法使用服务?为什么在angular 2中这个html消息在运行时没有更新,在angular 1中,这个Service方法的效果很好?顺便说一句,如果不使用服务,并简单地清除SignTime()中setTimeout的值 - 它正在工作!但是,每次我需要清除消息时,我都不会写setTimeout – TroAlex
使用了'setInterval',而不是'setTimeout' – Erevald
编辑以setTimeout和执行console.log秀“清除”,但新的空字符串值不能结合到模板。 setTimeout( ()=> { this.message =“”; console.log(“cleared”); }, this.interval); – TroAlex