Question

我有多个角度组件，每个都需要共享一些标志（有些也是数值），对这些标志的更改也应该应用于其他组件。

以下示例有点像我的问题。目前，我正在使用EventManager（类似于https://github.com/jhipster/ng-jhipster/blob/master/src/service/event-manager.service.ts）将更改传播到其他组件。

@Component({
 selector: 'parent',
 templateUrl: './parent.html'
})
export class ParentComponent implements OnInit, OnDestroy {
flag1:boolean; flag2:boolean; flag3:booean; flag4:boolean; flag5:boolean;
private setFlag1Subscriber:Subscription;
// similary for other flags

constructor(private eventManager: EventManager) {}

 ngOnInit() {
  this.subscribeSetFlag1Event();
 }

 private setFlag1(flag1) {
  this.flag1 = flag1;
 }

 private subscribeSetFlag1Event() {
  this.editRefreshScenarioEvent = this.eventManager.subscribe(
      'setFlag1Event',
      (response) => this.setFlag1(response.content)
    );
 }
 ngOnDestroy() {
  this.eventManager.destroy(this.setFlag1Subscriber);
 }
}

这样，如果我包含更多标记，则代码变得笨重且难以阅读。

子组件将广播相应的事件以设置该标志，如下所示：我可以使用@Input和@Output，因为我有多个级别的孩子似乎也不可行（可能会发生flag5只被第4级孩子修改）

@Component({
     selector: 'first-level-child1',
     templateUrl: './first-level-child1.html'
})
export class FirstLevelChild1Component {
 @Input() flag1: booean;

 constructor(private eventManager: EventManager) {}

  OnClickChangeFlag1() {
   this.eventManager.broadcast({
       name: 'setFlag1Event',
       content: this.flag1
   });
  }
}

这样我就有了多个级别的子节点，需要这些标志，并且有一些新的标志应该在同一级别共享。对于例如flag6，flag7应该在FirstLevelChild1Component＆amp;之间共享。 FirstLevelChild2Component。像这样我有很多标志，每个变化都应该传播到其他组件。

任何人都可以提出更好的方法来实现这一点，比如拥有所有这些标志的共享服务以及标志中的任何更改都会更新其他组件

在角度组件之间共享多个标志的最佳方法

0 个答案: