我在角度6中遇到父组件方法的问题

Question

我有3个级别的组件。 第一个组件是MAIN组件，第二个是SIDEBAR组件，第三个组件是位置。

我在位置组件中有一个按钮。当我单击它时，我想点击主要组件功能。我如何不使用两次@output就可以实现呢？

Answer 1

创建一个SharedService。将此SharedService注入要共享数据的所有组件中。

类似这样的东西：

import { BehaviorSubject, Observable } from 'rxjs';

@Injectable()
export class SharedService {

  private sharedData: BehaviorSubject<any> = new BehaviorSubject<any>(null);
  public sharedData$: Observable<any> = this.sharedData.asObservable();

  setSharedData(sharedData) {
    this.sharedData.next(sharedData);
  }
}

现在只需将SharedService作为依赖项注入您的LocationComponent和MainComponent

在LocationComponent实例上，从setSharedData调用SharedService方法。

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../shared.service';

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

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
    this.sharedService.setSharedData({ foo: 'bar' });
  }

}

然后从subscribe到MainComponent sharedData$中的ngOnInit。

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../shared.service';

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

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
    this.sharedService.sharedData$
      .subscribe(sharedData => console.log('Got the shared data in the main component as: ', sharedData));
  }

}

---

这是您推荐的Working Sample StackBlitz。

Answer 2

为简单起见，您可以创建一个具有EventEmmiter的AppNotificationService，如下所示。然后在两个组件中都使用此服务。

export class AppNotificationService {
    buttonClicked: EventEmitter<string> = new EventEmitter<string>();
    emitbuttonClickedEvent(id) {
        this.buttonClicked.emit(id);
    }

    getbuttonClickedEvent() {
    return this.buttonClicked;
    }
}

class LocationComponent{
    onClick(){
        this.appNotificationService.emitbuttonClickedEvent("id");
    }
}

class MainComponent{

    ngOnInit(){
        this.appNotificationService.getbuttonClickedEvent().subscribe((item)=>{
            this.callThisOnButtonClick();
        });
    }

    callThisOnButtonClick(){
          Console.log("Message from Main Component when button clicked in Location Service")
    }

}

您还可以在AppNotificationService中创建多个EventEmitter。