angular 6执行孙辈的祖辈函数

我需要执行此祖父母组件功能：

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**
  }
}

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;
  }
}

我发现的一个更接近我想要的示例是创建一个如下的数据服务：

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")

但我不想传递任何消息，我只想执行一个函数，所以我真的需要创建那个数据服务吗？我能不能直接在祖父母部分做一个可观察的或其他的东西？

---

如果是这样，有人能给我举个例子吗？

好的，我得到了解决方案，下面是我所做的

我创建了一个数据服务，它接收来自孩子的按钮点击并使其可见，这样祖父母就可以订阅该主题并检测更改并执行祖父母功能

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';

@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**
  }
}

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;
  }
}

---

我希望这对像我这样的其他人有所帮助。

您已经阅读了吗？您可以解释您的身份验证策略以对特定问题进行评论。您可能可以使用身份验证服务，也可能是需要身份验证的路由的防护，如果用户未经身份验证，则可以将防护配置为重定向到登录页面。Im使用的身份验证很简单，app.component包含登录页面和主页。应用程序以isLoggedIn=false开始，就像so

一样，如果凭据成功，它会将isLoggedIn更改为true，并像so

一样加载主组件。如果要使用

登录

/

注销

功能，请将它们放在服务中，而不是

应用组件

。。。也许

AppComponent

会监听一个

loginState

可观察到的，并显示一个横幅或诸如此类的东西，但我看不出它实际进行注销的原因。这是一个好的开始，但在设计方面还有更多的改进空间。但是，只有当你陷入这样的另一种情况时，你才能看到它。还要试着理解为什么必须使用服务，以及该服务如何解决您的设计问题。