Question

我想将数据从仪表板组件共享到导航栏组件，如下所示。

shareddata.service.ts

export class SharedData {
private sensorDet = new BehaviorSubject('');
  currentsensorDet = this.sensorDet.asObservable();
  
 constructor() { }
 sensorinfo(selectsensor:string) {
     console.log(selectsensor);

    this.sensorDet.next(selectsensor);
  }

dashboard.component.ts


constructor(private shareddata:SharedData) {}
ngOnInit(){

this.shareddata.currentsensorDet.subscribe(selectsensor => 
  {  this.sensorval = selectsensor;
    console.log(this.sensorval);
    this.dataChanged(JSON.parse(selectsensor));
}

});
}

navbar.component.ts

import { SharedData } from './../../shareddata.service';

addselectsensor(sensevar){
    this.shareddata.sensorinfo(JSON.stringify(sensevar));



  }

我将在导航栏的 html 文件中使用的上述仪表板数据

navbar.component.html

 <li class="nav-item dropdown" ngbDropdown >
        <a class="nav-link dropdown-toggle" id="notificationDropdown" ngbDropdownToggle>
    
          <i class="fa fa-map-marker" aria-hidden="true"></i>&nbsp; Chennai

 </a>
 <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" style="height: 150px; overflow: auto;" ngbDropdownMenu aria-labelledby="notificationDropdown">
 
  <ul class="list-group"  id="hvb"*ngFor ="let sensor of sensors;let i =index" (ngModelChange)="addselectsensor(selectsensor)">
    <div class="custom-control custom-switch" >

    <li class="list-group-item borderless" style="padding: 5px;" > 

    <div class="row no-gutters">
      <div class="col-sm-4" >
        {{sensor.name}} 
        </div>
        <div class="col-sm-7"></div>
        <div class="col-sm-1" >
          <input type="checkbox"  class="custom-control-input" id="customSwitches{{i}}" (click)="addselectsensor(sensor)">
<label class="custom-control-label" for="customSwitches{{i}}">    </label>
        </div>
          
  
    </div>
    
  </li>
  </div>
  </ul>    
</div>
      </li>

对于复选框选择，我在仪表板组件文件中使用了 onchange 功能，我必须在导航栏组件中使用它。

dashboard.component.ts

 dataChanged (selectsensor) {
    console.log(selectsensor);

    var existsflag = -1;
    
        for(var ind=0;ind<this.sensorsarray.length;ind++){
    
           if(this.sensorsarray[ind].name == selectsensor.name){

//some code///

我的要求来自仪表板组件，我必须与共享数据服务共享数据到导航栏（用于选择复选框，即切换复选框）。

上面的代码我用过但对我不起作用任何人都可以帮我解决这个问题。

如何在角度共享服务中的不同组件之间共享数据

0 个答案: