Всем привет.
Имею родительский компонент в Angular:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<router-outlet></router-outlet>`
})
export class AppComponent {
auth: any = false;
}
Также имею много дочерних компонентов среди которых есть компонент AuthComponent, который отвечает за авторизацию пользователя: пользователь вводит логин и пароль и компонент AuthComponent посылает запрос на сервер, чтобы узнать есть ли пользователь с таким логином и паролем или нету:
AuthComponentimport { Component, ViewChild } from '@angular/core';
import {Router} from '@angular/router';
import {AuthService} from './auth.service';
import {AppComponent} from '../app.component';
@Component({
selector: 'authorization',
templateUrl: './auth.component.html',
providers: [AuthService],
styleUrls: ['./auth.component.css']
})
export class AuthComponent {
user = {
email: '',
pass: ''
};
auth = {};
errorMessage = document.getElementsByClassName("error-message");
constructor(private authService: AuthService, private router: Router){}
@ViewChild(AppComponent, {static: false})
private appComponent: AppComponent;
comeIn(event:any) {
if (this.user.email !== '' && this.user.pass !== '') {
this.authService.getUser(this.user).subscribe(
(data: any) => {
this.auth = data;
console.log(this.appComponent.auth);
console.log(typeof this.appComponent.auth);
this.appComponent.auth = data;
console.log(this.appComponent.auth);
console.log(typeof this.appComponent.auth);
if (data)
this.router.navigate(['/marketer-cabinet']);
else {
this.errorMessage[0].classList.add("visible");
}
},
error => console.log(error)
);
}
}
hideErrorMes () {
this.errorMessage[0].classList.remove("visible");
}
}
Хочу сделать так: когда приходит ответ с сервера, то в свойство "auth" родительского компонента записать true или false (есть такой пользователь или нету и это будет означать авторизован пользователь или нет) и потом из всех остальных дочерних компонентов проверять: пользователь авторизован или нет. В компоненте AuthComponent я попытался сделать это через @ViewChild, но это не работает, так как @ViewChild предназначен для доступа к свойствам и методам дочернего компонента, а не родительского. Есть вариант прописать эту логику на сервере в NodeJs(это в принципе более надежно для такой проверки как понимаю) или записать эту информацию в window, но меня интересует можно ли это как-то организовать чисто Ангуляровским способом (хотя бы ради более глубокого понимая Ангуляр).
То есть интересует: есть ли способ из дочернего компонента записать значение в свойство родительского компонента, а потом прочитать его