Угловые 6 выполняют функции дедушки и дедушки

Question

Мне нужно выполнить функции компонента этого прародителя:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  public loginPage = true;

  public login = function(){
    this.loginPage = false;
  }
  public logout = function(){
    this.loginPage = true;
  }

}

из этого компонента внука:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dropmenu',
  templateUrl: './dropmenu.component.html',
  styleUrls: ['./dropmenu.component.css']
})
export class DropmenuComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  logout(){
    sessionStorage.removeItem('token');
    **//EXECUTE LOGOUT() GRANDPARENT FUNCTION HERE**
  }
}

Более близкий пример, который я нашел к тому, что я хочу, это создать DataService, подобный этому:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject('default message');
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}

а затем в компонентах сделать:

message: string;
this.data.currentMessage.subscribe(message => this.message = message)
//AND
this.data.changeMessage("Hello from Sibling")

Но я не хочу передавать какое-либо сообщение, я просто хочу выполнить функцию, так что мне действительно нужно создавать этот DataService? Разве я не могу просто сделать Observable или что-то прямо в компоненте бабушки и дедушки? Если да, может кто-нибудь показать мне пример, пожалуйста?

Answer 1

Хорошо, я получил решение, вот что я сделал.

Я создал DataService, который получает щелчок кнопки от дочернего элемента и делает его видимым, чтобы потом дедушка мог подписаться на эту тему, обнаруживать изменения и выполнять функцию деда.

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/internal/Subject';
import { Observable } from 'rxjs';

@Injectable()
export class DataService {

    private subject = new Subject();

    constructor() { }

    sendClickLogout() {
        this.subject.next();
    }

    clickLogout(): Observable<any>{
        return this.subject.asObservable();
    }

}

Дочерний компонент:

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../services/data.service'

@Component({
  selector: 'app-dropmenu',
  templateUrl: './dropmenu.component.html',
  styleUrls: ['./dropmenu.component.css']
})
export class DropmenuComponent implements OnInit {

  constructor(private dataService: DataService) { }

  ngOnInit() {
  }

  logout(){
    this.dataService.sendClickLogout();
  }

}

Родительский компонент:

import { Component } from '@angular/core';
import { DataService } from '../app/services/data.service'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private dataService: DataService){
    this.dataService.clickLogout().subscribe(response => { this.logout() });
  }

  public loginPage = true;

  public logout = function(){
    sessionStorage.removeItem('token');
    this.loginPage = true;
  }
}

Я надеюсь, что это будет полезно для других, как я.