@timofy

Как записать и прочитать свойство родительского компонента из дочернего?

Всем привет.
Имею родительский компонент в Angular:
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<router-outlet></router-outlet>`
})
export class AppComponent {
    auth: any = false;
}

Также имею много дочерних компонентов среди которых есть компонент AuthComponent, который отвечает за авторизацию пользователя: пользователь вводит логин и пароль и компонент AuthComponent посылает запрос на сервер, чтобы узнать есть ли пользователь с таким логином и паролем или нету:
AuthComponent

import { 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, но меня интересует можно ли это как-то организовать чисто Ангуляровским способом (хотя бы ради более глубокого понимая Ангуляр).
То есть интересует: есть ли способ из дочернего компонента записать значение в свойство родительского компонента, а потом прочитать его
  • Вопрос задан
  • 106 просмотров
Решения вопроса 1
@Sashqa
Используйте сервис
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Revenant78
в дочернем компоненте эмить событие (EventEmitter)
и слушай это событие в родителе
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы