通过孩子向孙辈注入祖先的前馈

Question

问题

现在，我正在使用一些组件来掩盖一些较复杂的功能，使其远离实现的开发人员，从而使他们可以更轻松地编写代码块。

从代码方面看，组件堆栈如下所示：

<smart-nav-tile-group>
    <radio-checkbox-group>
        <smart-nav-tile>
            <radio-checkbox-wrapper>

我要完成的工作是将radio-checkbox-group组件的前向引用注入每个radio-checkbox-wrapper组件中，以便两个组件之间进行双向通信。

因此，在我的radio-checkbox-wrapper函数中，我具有以下内容：

constructor

只要@Inject(forwardRef(() => RadioCheckboxGroupComponent)) public inputGroup: RadioCheckboxGroupComponent 组件是RadioCheckboxGroup的直接父级，就可以正常工作。但是，RadioCheckboxWrapper组件位于中间，则会引发以下错误：

SmartNavTile

问题

无论要查找祖先树有多远，如何在SmartNavTileComponent.html:2 ERROR Error: StaticInjectorError(AppModule)[RadioCheckboxWrapperComponent -> RadioCheckboxGroupComponent]: StaticInjectorError(Platform: core)[RadioCheckboxWrapperComponent -> RadioCheckboxGroupComponent]: NullInjectorError: No provider for RadioCheckboxGroupComponent! 组件中创建对RadioCheckboxGroup组件的前向引用？

Answer 1

通过参考将孩子与父母沟通并不是一个好的设计。我建议提供某种可以帮助父母与孩子之间进行交流的服务。

不相关的组件：与服务共享数据

在缺少直接连接的组件（例如兄弟姐妹，孙子等）之间传递数据时，应该使用共享服务。

  

用例：如果我们在这些组件中的任何一个中创建一个函数来更改消息的值。执行此功能后，新数据将自动广播到所有其他组件。

data.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject('default message');
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}

parent.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-parent',
  template: `
    {{message}}
  `,
  styleUrls: ['./sibling.component.css']
})
export class ParentComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

}

sibling.component.ts

它可以是兄弟姐妹或子组件

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-sibling',
  template: `
    {{message}}
    <button (click)="newMessage()">New Message</button>
  `,
  styleUrls: ['./sibling.component.css']
})
export class SiblingComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

  newMessage() {
    this.data.changeMessage("Hello from Sibling")
  }

}

Answer 2

您可以使用ViewChild（）来实现，并且可以访问模板中添加的任何组件。

<smart-nav-tile-group>
    <radio-checkbox-group>
        <smart-nav-tile>
            <radio-checkbox-wrapper>

在radio-checkbox-group组件中，您可以使用来访问Radio Checkbox组件

@ViewChild(RadioCheckboxRrapperComponent)
  radiocheckboxwrapper: RadioCheckboxRrapperComponent;