在孙子组件和父组件之间传递值 [英] 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.

它似乎只能在一个级别上工作...可以使它在N个级别上工作吗?

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中注入服务以设置值，并在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

STACKBLITZ

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