Question

我正在研究我需要递归添加组件的功能，我希望一个事件可以在任何级别由嵌套组件触发，但它会在主要父组件上处理（ appcomponent ）它添加了该组件

我在哪里递归添加 wts comp 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 component .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());
    }
};

如果我们有group withing group，那么它将自己嵌套以形成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({});
  }
}

这是我的appcomponent

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＆gt; wts＆gt; wts＆gt; wts＆gt; ...＆gt;规则（这里我必须发出一个事件，并且应该在appcomp上处理。这个规则compo可以在任何级别）

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

Answer 1

我会将根wts组件设为不同的组件root-wts（可以与嵌套的wts组件具有相同的模板，提供注入每个{{1}的服务}}和wts以及rule。

root-wts订阅此服务中的可观察对象 root-wts（如果适用）和wts使用共享服务中的observable发出事件

如何在angular2

1 个答案: