时间戳

首页 > 解决方案 > 在孙子组件和父组件之间传递值

angular - 在孙子组件和父组件之间传递值

问题描述

使用 Angular 8 我有一些组件如下：

Parent 1 > Child 1 > ... > N Grandchild 1 

Parent 2 > Child 2 > ... > N Grandchild 2

之间Child X并且N Grandchild X可能有其他组件。所以它可以超过3个级别。

目标
1. 在 中设置一个值并在 中N Grandchild 1使用它Parent 1。
2. 在 中设置一个值并在 中N Grandchild 2使用它Parent 2。

我正在考虑几个选项：

  1. 使用 EventEmitter（StackBlitz 示例）

    问题：不能在孙子和父母之间工作。

    它似乎只工作一级......有可能让它工作N级吗？ 

    export class GrandchildComponent implements OnInit {

  @Output() changeEvent = new EventEmitter<string>();

  ngOnInit() {
    this.changeEvent.emit('Hello');
  }

}

  2. 使用服务

    在这种情况下，我将服务注入N Grandchild X以设置值并Parent X读取值。

    问题：
    如何确定Parent 1读取设置的值N GrandChild 1和Parent 2读取设置的值N GrandChild 2？这可能吗？

标签： angularangular8

解决方案

就像在另一个答案中一样，它提供了使用某种主题的解决方案，但是如果在根级别提供该主题及其价值，那么您将面临该主题及其价值在应用程序中共享的问题。

一种选择是在父级提供服务，这意味着父级及其所有后代都具有相同的服务实例，因此，如果grandchild1为主题发出一个值，则只会parent1接收该值，而不是parent2.

因此，如前所述，您将做什么，以您想要的最高级别提供服务，在这种情况下，我假设它是parent：

import { MyService } from './my-service';

@Component({
  selector: 'parent',
  template: `
  Parent:
  <p>Value from grandchild: {{value$ | async}}</p>
  <child></child>
  `,
  providers: [MyService] // <<<<<<<<<< add this (only in parent)!
})

export class ParentComponent { 

  value$;

  constructor(private myService: MyService) {
    this.value$ = this.myService.subj$;
  }
}

和服务可能有：

private subj = new Subject();
public subj$ = this.subj.asObservable();

setValue(value) {
  this.subj.next(value)
}

而在孙子中，当您想要发出值时，只需setValue()使用新值调用即可。

堆栈闪电战

推荐阅读