如何在 angular 4 中的 2 个兄弟组件之间进行通信？

Question

我想在一个组件中勾选复选框，并在选中复选框时在不同的组件中显示数据。

组件 1

<div class="col-md-6" *ngFor="let mapLegend of mapLegends">
            <label class="checkbox">
            <input type="checkbox"
            name="mapLegend"
            value="{{mapLegend.name}}"                            
            [(ngModel)]="mapLegend.checked"/>
            <span class="checkbox__input"></span>
            <span class="checkbox__label"> {{mapLegend.name}}</span>
            </label>
 </div>

组件 2 如果 mapLegend.checked

需要数据

Answer 1

有几种方法可以做到这一点。根据您的要求，我认为您想要 observe 在任一组件中所做的更改。所以我建议你选择 subject.

在服务中创建一个subject。现在，订阅组件中的 variable 以收听任何更改。

export class SomeService{
    public mySubject = new Subject();
    choice: []<any>;

    insertCheckBoxValue(val){
        this.choice.push(val);
        this.mySubject.next('the value you want to transmit to all Subscribers'); // Let's say: Yoda
    }
}


export class Component1{
    constructor(private svc: SomeService){}

    this.svc.mySubject().subscribe( val => console.log(val)) // this will listen to the changes of Comp2 : Yoda

    checkBoxClicked(someVal){
        this.svc.insertCheckBoxValue(someVal);
    }

}

export class Component2{
    constructor(private svc: SomeService){}

    this.svc.mySubject().subscribe( val => console.log(val)) // this will listen to the changes of Comp1 : Yoda

    checkBoxClicked(someVal){
        this.svc.insertCheckBoxValue(someVal);
    }

}

If you want to share the data, then create a variable in SomeService file and get its value whenever .next() is fired. You can actually share a common value from .next(your_value) and then subscribing it in another component.

Here is the demo as you asked & Here is the code

调整以上代码以满足您的要求并提高效率。必须对其进行改进以满足您的特定需求

Answer 2

@Shashank Vivek 仍然是进行跨组件通信的最通用方法。如果您需要的只是您所描述的：如果我的复选框为真，则使用我的模型作为参数初始化 childComponent，然后您可以执行如下操作：

组件：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  mapLegends: Array<{
    checked: boolean,
    name: string
  }>;

  constructor() {
    this.mapLegends = [
        {
          checked: false,
          name: 'Check 1'
        },
        {
          checked: false,
          name: 'Check 2'
        }
    ];
  }

  onCheckboxChange(index: number) {
    console.log(index);
    console.log(this.mapLegends[index]);
  }
}

html :

<div class="col-md-6" *ngFor="let mapLegend of mapLegends; let i = index">
    <label class="checkbox">
      <input type="checkbox"
      name="mapLegend"
      value="{{mapLegend.name}}"                            
      [(ngModel)]="mapLegend.checked" 
      (change)="onCheckboxChange(i)" />
      <span class="checkbox__input"></span>
      <span class="checkbox__label"> {{mapLegend.name}}</span>
    </label>
 </div>


 <div class="col-md-6" *ngFor="let mapLegend of mapLegends; let i = index">
   <hello *ngIf="mapLegend.checked" [name]="mapLegend.name"></hello>
 </div>

Online version

更新 1

在 Component.ts 下面的代码中你可以做任何你想要的特征：

//This callback will be call on any change from checkbox. Up to you to do what ever you want.
  onCheckboxChange(index: number) {
    if(this.mapLegends[index]) {
      // Do what ever you want
      console.log(this.mapLegends[index]);
    }
  }

或在component.html中：

 <div class="col-md-6" *ngFor="let mapLegend of mapLegends; let i = index">
<!-- this section will be display only if checkbox is checked. -->
   <div *ngIf="mapLegend.checked">
      hello {{ mapLegend.name }} i am happy to see you.
   </div>
 </div>

Answer 3

您可以使用共享服务并从注入该服务的任何组件发送通知。

考虑以下问题：

checkbox.service.ts

import {Injectable} from '@angular/core';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';


@Injectable()
export class CheckboxService {
  // initial value false (not checked)
  public checkbox = new BehaviorSubject<boolean>(false);
  checkboxObservable = this.checkbox.asObservable();

  changeCheckboxState (value: boolean): void {
    this.checkbox.next(value);
  }
}

然后在你的组件中：

reciver.component.ts

要获取您要执行的复选框状态：

constructor(private cs: CheckboxService) {
    this.cs.checkboxObservable
       .subscribe((checkboxState) => {
              // getting the value
              console.log(checkboxState);
          });
    }

sender.component.ts

要为复选框设置新状态，您只需使用：

changeCheckboxState(){
this.cs.changeCheckboxState(this.mapLegendCheckbox);
}

备注不要忘记在 相同模块 的提供数组中添加服务和声明数组中的组件，这样您就不会收到任何错误。

如何在 angular 4 中的 2 个兄弟组件之间进行通信？

how to communicate beetween 2 sibling component in angular 4?

angular

angular-forms