Внедрение ref-предка через детей внуку

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 в *Компонент 1026 * независимо от того, как далеко должно пройти дерево предков, чтобы найти его?

Answer 1

Вы можете добиться с помощью ViewChild (), и вы можете получить доступ к любому компоненту, добавленному в шаблон.

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

В Компоненте группы радио-флажков вы можете получить доступ к Компоненту флажка радио, используя

@ViewChild(RadioCheckboxRrapperComponent)
  radiocheckboxwrapper: RadioCheckboxRrapperComponent;

Answer 2

Общение ребенка с родителем по ссылке не очень хороший дизайн.Я хотел бы предложить некоторые виды услуг, которые могут помочь в общении между родителем и ребенком.

Несвязанные компоненты: обмен данными со службой

При передаче данных между компонентами, которые не имеют прямого соединения,такие как братья и сестры, внуки и т. д., вы должны совместно использовать службу.

Вариант использования: если мы создаем функцию в любом из этих компонентов, которая изменяет значение сообщения.при выполнении этой функции новые данные автоматически передаются всем другим компонентам.

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")
  }

}