angular - @Output از سرویس
من از Angular CLI استفاده میکنم. در واقع، من یک سرویس دارم. این سرویس متغیر answer را باز میگرداند. من میخواهم از این متغیر در app-component (یا کپی از این متغیر) استفاده کنم. بنابراین وقتی answer تغییر کند، باید در app-component دیده شود. حالا من فقط مقدار اولیه متغیر را میبینم و تغییر answer را نمیبینم.
خدمت :
import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
@Injectable()
export class LogInGuardService implements CanActivate {
public answer: boolean;
public i: number = 0;
canActivate() {
let entered = JSON.parse(localStorage.getItem('enteredValue'));
let enteredEmail = entered.email_field;
let enteredPw = entered.password_field;
let guardChange = false;
for (var i = 1; i < localStorage.length; i++) {
let stored = JSON.parse(localStorage.getItem(localStorage.key(i)));
let storedEmail = stored.email_field;
let storedPw = stored.password_field;
if ( enteredEmail == storedEmail ) {
if ( enteredPw == storedPw ) {
this.answer = true;
} else {
alert('Неверный пароль');
this.answer = false;
}
} else {
this.i++;
}
}
if (this.i == localStorage.length-1) {
alert('Пользователя с таким e-mail не существует');
}
return this.answer;
}
constructor() { }
}
کامپوننت-اپ
import { Component } from '@angular/core';
import { LogInGuardService } from './log-in-guard.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public guardInMain: boolean;
constructor(private loginService: LogInGuardService) {
this.guardInMain = true;
this.guardInMain = !this.loginService.answer;
}
}
پاسخ شماره ۱
اگر میخواهید مقداری متغیر را در سرویس خود ذخیره کنید، میتوانید از Observables برای این کار استفاده کنید.
برای این کار از BehaviorSubject استفاده کنید. Subject هم قابل مشاهده است و هم ناظر. بنابراین میتوانید به آن بگویید پاسخ جدیدی وجود دارد و تمام مشترکین را مطلع میکند.
در خدمت شما:
answer$ = new BehaviorSubject<string>('');
getAnswer(): Observable<string> {
return this.answer$.asObservable();
}
giveAnswer(answer: string) {
this.answer$.next(answer);
}
توجه داشته باشید که سازنده مقدار اولیه را میپذیرد.
شما میتوانید پاسخ جدیدی تنظیم کنید:
AnswerService.giveAnswer('this is my answer');
و شما میتوانید در هر جایی به تغییرات ارزش مشترک شوید:
AnswerService.getAnswer().subscribe(answer => console.log(answer));
