在孙组件和父组件之间传递值 [英] Pass value between Grandchild component and Parent component

问题描述

使用 Angular 8 我有如下几个组件:

Using Angular 8 I have a few components as follows:

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

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

Child X 和 N Grandchild X 之间可能有其他组件.所以可以超过3个级别.

Between Child X and N Grandchild X might have other components. So it can be more than 3 levels.

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

Objective
1. Set a Value in N Grandchild 1 and use it in Parent 1.
2. Set a Value in N Grandchild 2 and use it in Parent 2.

我正在考虑几个选项:

1. 使用 EventEmitter(StackBlitz 示例)

问题:孙子和父母之间不工作.

Problem: Not working between Grandchild and Parent.

它似乎只能向上一级工作... 有可能让它向上一级工作吗?

It seems to work only one level up ... It is possible to make it work N levels up?

export class GrandchildComponent implements OnInit {

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

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

} 

使用服务

Using a Service

在这种情况下，我在 N Grandchild X 中注入 Service 以设置值，并在 Parent X 中读取值.

In this case I inject the Service in N Grandchild X to set the value and in Parent X to read the value.

问题:
如何确保Parent 1读取N GrandChild 1设置的值和Parent 2读取N GrandChild 2设置的值?这可能吗?

Problem:
How to be sure that Parent 1 reads the value set by N GrandChild 1 and Parent 2 reads the value set by N GrandChild 2? Is this possible?

推荐答案

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

Like in another answer, which provides solution to use a Subject of some kind, but you face the issue that that subject and its value is shared across the app, if it's provided at root level.

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

One option is to provide the service at the parent level, which means that the parent and all its descendants have the same instance of the service, so therefore, if grandchild1 emits a value for the subject, only parent1 will receive that value, not parent2.

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

So what you would do, as mentioned, provide the service at the highest level you want, in this case I would assume it would be the 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() 即可.

And in the grandchild when you want to emit value, just call setValue() with the new value.

STACKBLITZ

这篇关于在孙组件和父组件之间传递值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！