angular 6 从孙子执行祖父函数 [英] angular 6 execute grandparent functions from grandchild

问题描述

我需要执行这个祖父组件函数:

I need to execute this grandparent component functions:

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:

The closer example that I found to what I want was to create a DataService like this one:

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 或其他东西吗?如果是这样，有人可以给我举个例子吗?

But I don't want to pass any message, I just want to execute a function so do I really need to create that DataService? Can't I just make an Observable or something directly in the grandparent component? If so, can someone show me an example please?

推荐答案

好的，我找到了解决方案，这就是我所做的.

Ok I got the solution, here is what I did.

我创建了一个 DataService，它接收来自孩子的按钮点击并使其可观察，这样祖父母就可以订阅该主题并检测更改并执行祖父母函数.

I created a DataService that receives the button click from the child and makes it observable so then the grandparent can subscribe to that subject and detect the changes and execute the grandparent function.

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

我希望这对像我这样的人有所帮助.

I hope this to be helpful to others like me.

这篇关于angular 6 从孙子执行祖父函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！