Question

我有componet1和component2，component1有多个复选框，component2有一组按钮，默认情况下是禁用的。当我将选中多个复选框中的一个复选框时，它将把布尔数据从componet1发送到componet2。使用角度4。

o / p应该=> Componet2在每个componet1的复选框选中事件中获取值

示例代码：

 constructor( private popsetcardcomponent: PopsetCardComponent) 
 {
    popsetcardcomponent.checking.subscribe(() => {
         this.onCheck(popsetcardcomponent);
    });
 }

Answer 1

您可以使用rxjs 主题

import { Subject } from 'rxjs/Subject';

创建commonService.ts

subject = new Subject<any>();

并在您的componet1.ts

中

commonService.subject.next('change');

，并在您的componet2.ts中通过 ngOnInit（）

进行订阅

ngOnInit() {

    this.commonService.subject.subscribe(res => {
            this.some_var = res;
    });
}

Answer 2

您可以在Component1中的复选框更改事件上使用Eventemitter，并将信息传递给componet1和component2的父组件。然后，您可以使用ParentComponent中的ViewChild从component2访问属性和方法：

component1.ts：

@Output checkboxChange: Eventemitter<boolean> = new Eventemitter<boolean>();

changeEvent(){
   this.checkboxChange.emit(value);
}

ParentComponent.html：

<component2 #component2></component2>
<component1 (checkboxChange)="onCheckboxChange($event)"></component1>

ParentComponent.ts：

@ViewChild("component2") component2: Component2;
onCheckboxChange(value: boolean){
  this.component2.doWhatYouWantWithCheckboxValue(value);
}

oncheckbox选中的事件使用angular 4中的事件将数据从一个组件发送到另一组件

2 个答案: