如何处理angular2中递归嵌套组件中的事件

Question

我正在开发需要递归添加组件的功能，我想要一个由嵌套组件在任何级别触发的事件，但它在添加组件的主父组件(appcomponent)上处理

我的递归添加wtscomp html 在哪里

<div class="panel panel-default panel-body" *ngIf="rules">
<button class="btn btn-primary" (click)="addRule()">add rule</button>
<button class="btn btn-primary" (click)="addGroup()">add group</button>
<button class="btn btn-danger" (click)="removeGroup()" *ngIf="enableRemoveGroup">remove group</button>
<div *ngIf="rules.groups">
<!-- adding itself if there is group -->
<wts *ngFor="let group of rules.groups" [data]="group"></wts>
</div>
<rule *ngFor="let rule of rules.rules" [rule]="rule"></rule>
</div>

wts组件.ts

@Component({
selector: 'wts',
templateUrl: './wts.component.html',
providers: [WtsServiceService],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class WTSComponent implements OnInit {
rules: Group;
enableRemoveGroup: boolean = false;
@Output() removeGroupCB = new EventEmitter();
@Input('data')
set data(value) {
if (value) {
this.enableRemoveGroup = true;
}
this.rules = value || new Group();
};
constructor(private wtsServiceService: WtsServiceService) {
this.rules = new Group();
}
private addGroup() {
if (!this.rules.groups) {
this.rules.groups = [];
}
this.rules.groups.push(new Group());
console.log(this.rules);
}
private removeGroup() {
delete this.rules;
}
private addRule() {
this.rules.rules.push(new Rule());
}
ngOnInit() { }
}

在我的comp中，我有对象规则，其中包含规则和组，组包含规则和

这是我的型号

export class Rule {
subjectType: string;
valueType: string;
subject: string;
value: string;
constructor(st = '', vt = '', s = '', v = '') {
this.subjectType = st;
this.valueType = vt;
this.subject = s;
this.value = v;
}
}
export class Group {
rules: Rule[];
groups: Group[];
constructor() {
this.rules = [];
this.rules.push(new Rule());
}
};

如果我们在一个组中有一个组，那么它将自己嵌套以形成UI。我们有规则组件来列出规则

这是我的规则comp.ts

@Component({
selector: 'rule',
templateUrl: './rule.component.html',
styleUrls: ['./rule.component.css'],
providers: [WtsServiceService],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class RuleComponent implements OnInit {
rule: Rule;
@Input('rule')
set Setrule(value) {
this.rule = value;
}
constructor(private wtsServiceService: WtsServiceService) { }
private triggerHanlder() {
this.wtsServiceService.triggerCallBack();// to trigger appcomponent function
}
}

这是我的规则comp.html

<p *ngIf="rule">
<button class="btn btn-danger" (click)="triggerHanlder()">trigger handler</button>
</p>

当用户选择一个有效的规则并由主组件处理时，它将触发一个事件，即appcomponent

为了做到这一点，我创建了一个返回在appcomponent上订阅的observable的服务，规则组件调用了一个函数来触发该事件，但现在它按预期工作。

这是我的服务

@Injectable()
export class WtsServiceService {
resultSubject: ReplaySubject<any> = new ReplaySubject(1);
constructor() { }
public handleCallBack() {
return this.resultSubject;
}
public triggerCallBack() {
this.resultSubject.next({});
}
}

这是我的应用程序组件

export class AppComponent {
constructor( private _wtsServiceService: WtsServiceService) {
}
ngOnInit() {
this._wtsServiceService.handleCallBack().subscribe(() => {
console.log('parent function');//this should get execute when user click on trigger handler on rule comp
})
}
}

appcomp>wts>wts>wts>…>规则(这里我必须发出一个事件，应该在appcomp上处理。这个规则comp可以在任何级别)

请帮助找到解决方法，并建议是否有其他更好的方法。

Answer 1

我会使根wts组件成为不同的组件root-wts(可以与嵌套的wts组件具有相同的模板，提供注入到每个wts和rule以及root-wts的服务。

root-wts订阅了此服务中的可观察项wts(如果适用)和rule使用共享服务中的可观察到的发射事件