在孙组件和父组件之间传递值

Question

使用 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？这可能吗？

Answer 1

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

一种选择是在父级提供服务，这意味着父级及其所有后代都具有相同的服务实例，因此，如果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()使用新值进行调用即可。

堆栈闪电战