在Angular 5中切换Sibling组件

Question

我试图让一个兄弟组件上的点击事件被听到＆＃39;由另一个兄弟组成部分。

我是否应该将链中的事件传递给父级，检测更改，然后通过父母以某种方式将其传递给兄弟姐妹（父母的另一个孩子）？

页面模板中的组件：

<wrap>
  <toggler>Toggle the Box</toggler>
  <box>Box Content ...</box>
</wrap>

Toggler组件：

@Component({
  selector: 'toggler',
  template: `<div (click)="toggleBox()"><ng-content></ng-content></div>`,
})
export class TogglerComponent {
  @Output() toggle = new EventEmitter<boolean>();
  visible: boolean = false;
  toggleBox(): void {
    this.visible = !this.visible;
    this.toggle.emit(this.visible);
  }
}

Box组件：盒子组件如何选择切换事件？

基本组件：

@Component({
  selector: 'box',
  template: `<ng-content *ngIf="toggle"></ng-content>`,
})
export class BoxComponent {
  @Input() toggle: boolean;
}

Answer 1

有几种方法可以完成兄弟组件通信：

1。服务

第一个选项是使用具有公共可观察属性的服务并将其注入组件。

@Injectable()
export class ToggleService {

  private toggle = new Subject<boolean>();

  public $toggle = this.toggle.asObservable();

  constructor() { }

  setToggle(val: boolean){
    this.toggle.next(val);
  }

}

从那里你的组件将是

TogglerComponent

export class TogglerComponent {


  constructor(toggleService: ToggleService){}

  visible: boolean = false;
  toggleBox(): void {
    this.visible = !this.visible;
    this.toggleService.setToggle(this.visible);
  }
}

BoxComponent

export class BoxComponent implements OnInit {

   constructor(toggleService: TogglerService){

   }

   ngOnInit(){
     this.toggleService.$toggle.subscribe(val => {
       // Do Something
     });
   }
}

注意：使用这种方法，您需要小心DI范围，因为两个组件必须共享相同的服务实例。因此，您的提供者应该在父组件或共享或父模块中。

2。父母财产

第二种方法是在父级中使用属性并将其绑定到两个组件。

你的ParentComponent将是ilke

export class ParentComponent implements OnInit {

  public toggle: boolean;

  constructor() { }

  ngOnInit() {
  }

  changeToggle(val){
    this.toggle = val;
  }

}

你的模板只会绑定该函数和属性

<toggler (toggle)="changeToggle(toggle)"/>
<box [toggle]="toggle"/>

3。 BindingLess解决方案（不推荐）

根据您的评论，还有另一种选择，使用ViewChild，它看起来像：

export class ParentComponent implements AfterViewInit {

  @ViewChild(TogglerComponent)
  togglerComponent: TogglerComponent;

  @ViewChild(BoxComponent)
  boxComponent: BoxComponent

  constructor() { }

  ngAfterViewInit() {

    this.togglerComponent.toggle
      .subscribe(val => this.boxComponent.toggle = val)

  }

}

如需进一步参考，您可以查看：https://angular.io/guide/component-interaction