В приложении 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)
Проблема
Как я могу решить эту проблему с циклической зависимостью и поместить все компоненты и реализации в отдельные файлы?Со временем компоненты становятся тяжелыми, как я могу нарезать их на кусочки?