Angular 5. Круговая зависимость в машинописи при импорте классов друг в друга - PullRequest
0 голосов
/ 24 апреля 2018

В приложении Angular 5 с TypeScript.Я столкнулся с проблемой под названием Circular Dependency , когда попытался реализовать связь между компонентами.Существует два компонента radio и radio-group:

<radio-group [(value)]='selected'>
  <radio value='1'></radio>
  <radio value='2'></radio>
  <radio value='3'></radio>
</radio-group>

Они взаимодействуют друг с другом, когда пользователь выбирает и отменяет выбор элементов.

Пример реализации компонентов RadioGroupComponent:

import { Component, forwardRef, Input, Optional, ContentChildren, 

QueryList, EventEmitter, Output, ChangeDetectorRef, ChangeDetectionStrategy, AfterContentInit, OnChanges } from '@angular/core';
import { RadioGroup } from './radio-group.component';

@Component({
  selector: 'radio',
  styles: [`:host{cursor:pointer;}`],
  template: `<div (click)='check()'>
  <span *ngIf='!checked'>⚪️</span>
  <span *ngIf='checked'>?</span>
  <span>Click me. Value: {{value}} Checked: {{checked}}</span>
  </div>`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Radio  {
  @Input() value: any;
  checked = false;
  private _radioGroup: RadioGroup;
  constructor(@Optional() radioGroup: RadioGroup, public cd: ChangeDetectorRef){
    this._radioGroup = radioGroup;
  }
  check(){
    this.checked = true;
    if(this._radioGroup){
      this._radioGroup.selected = this;
    }
    this.markForCheck();
  }
  markForCheck(){
    this.cd.markForCheck();
  }
}

RadioComponent:

import { Component, forwardRef, Input, Optional, ContentChildren, QueryList, EventEmitter, Output, ChangeDetectorRef, ChangeDetectionStrategy, AfterContentInit, OnChanges } from '@angular/core';
import { Radio } from './radio.component';

@Component({
  selector: 'radio-group',
  template: `<ng-content></ng-content>`,
})
export class RadioGroup implements AfterContentInit, OnChanges{
  set selected (component:Radio){
    this._selected = component;
    this.valueChange.emit(component.value);
  } 
  private _selected:Radio = null;
  @Input() value:any;
  @Output() valueChange = new EventEmitter();
  @ContentChildren(forwardRef(() => Radio)) radioComponents: QueryList<Radio>;

  ngAfterContentInit() { this.checkParentComponents();}
  ngOnChanges(){ this.checkParentComponents();}
  checkParentComponents():void{
    this.radioComponents 
    && this.radioComponents.forEach(item=>{
        item.checked = item.value==this.value;
        if(item.checked){ this._selected = item;}
        item.markForCheck();
    });
  }
}

Онлайн-примеры

Рабочий пример со всеми объявлениями в одном файле (stackblitz.com)

Сломанный пример с разделенными файлами (stackblitz.com)

Проблема

Как я могу решить эту проблему с циклической зависимостью и поместить все компоненты и реализации в отдельные файлы?Со временем компоненты становятся тяжелыми, как я могу нарезать их на кусочки?

Ответы [ 4 ]

0 голосов
/ 14 марта 2019

Когда вам нужно установить связь между компонентами

И НЕ МОЖЕТ использовать @ Выход и @ Входы , использовать providers. DependencyInjection позволяет переопределять внедренные в классе конструктора всякий раз, когда вам это нужно.

DependencyInjection (angular.io)

Избегать круговых зависимостей (angular.io)

радио-group.component.ts:

import { RadioGroupBase } from './radio-group-base';

@Component({
  selector: 'radio-group',
  ...
  ==> providers: [{provide: RadioGroupBase, useExisting: RadioGroup}]
})
export class RadioGroup implements AfterContentInit, OnChanges{
...
}

radio.component.ts:

import { RadioGroupBase } from './radio-group-base';

@Component({
  selector: 'radio',
  ...
})
export class Radio  {
  constructor(
   ==> @Optional() radioGroup: RadioGroupBase, 
  ){
    //variable radioGroup will be undefined when there is no provider.
  }

радио-группа-base.ts:

export class RadioGroupBase {
  selected: any;
}

Рабочий раствор:

https://stackblitz.com/edit/angular-gyqmve

0 голосов
/ 24 апреля 2018

Попробуйте в Radio конструктор компонента вместо

constructor(@Optional() radioGroup: RadioGroup, public cd: ChangeDetectorRef)

этот код

constructor(@Inject(forwardRef(() => RadioGroup)) radioGroup: RadioGroup, public cd: ChangeDetectorRef)
0 голосов
/ 24 апреля 2018

Вы не должны редактировать RadioGroup атрибуты из Radio. Связь между дочерними и родительскими компонентами должна осуществляться через @Input и @Output.

Итак, удалите RadioGroup из Radio конструктора. Вместо этого вы можете сделать следующее,

import { 
   Component, 
   Input,
   EventEmitter,
   Output,
   ChangeDetectorRef,
   ChangeDetectionStrategy
} from '@angular/core';

@Component({
  selector: 'radio',
  styles: [`:host{cursor:pointer;}`],
  template: `
     <div (click)='check()'>
        <span *ngIf='!checked'>⚪️</span>
        <span *ngIf='checked'>?</span>
        <span>Click me. Value: {{value}} Checked: {{checked}}</span>
     </div>`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Radio  {
  @Input() value: any;
  @Output() valueChange: EventEmitter<any> = new EventEmitter();
  checked = false;
  constructor(public cd: ChangeDetectorRef){
  }
  check(){
    this.checked = true;
    this.valueChange.emit(this.value);
    this.markForCheck();
  }
  markForCheck(){
    this.cd.markForCheck();
  }
}

RadioGroup.component

@Component({
  selector: 'radio-group',
  template: `<ng-content></ng-content>`,
})
export class RadioGroup implements AfterContentInit, OnChanges, OnDestroy {
  set selected(component: Radio) {
    this._selected = component;
    this.valueChange.emit(component.value);
  }
  private _selected: Radio = null;
  @Input() value: any;
  @Output() valueChange = new EventEmitter();
  @ContentChildren(forwardRef(() => Radio)) radioComponents: QueryList<Radio>;

  subscriptionList = [];

  ngAfterContentInit() { this.checkParentComponents(); }
  ngOnChanges() { this.checkParentComponents(); }
  checkParentComponents(): void {
    if (this.radioComponents) {
      this.subscriptionList = this.radioComponents.map(item => {
        item.checked = item.value === this.value;
        if (item.checked) { this._selected = item; }
        item.markForCheck();
        // subscribe to each child "valueChange" event and return these subscriptions.
        return item.valueChange.subscription(value => this.selected = value);
      });

    }
  }

  ngOnDestroy() {
      // don't forget to unsubscribe.
      if (this.subscriptionList && this.subscriptionList.length ) {
          this.subscriptionList.forEach(sub => sub.unsubscribe());
      }
  }
}
0 голосов
/ 24 апреля 2018

Использование общего сервиса https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/ Раздел: «Несвязанные компоненты: обмен данными с сервисом»

Angular 2 - Использование общего сервиса

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