Question

我已经开始玩角度，我点击其中一个单选按钮（深色/浅色）时尝试更改我的谷歌地图的颜色。单选按钮位于一个组件中，而映射位于不同的组件中。如果我将地图和单选按钮放在同一个组件中，那么我的应用程序就会按照我想要的方式工作，但当我将它们放在2个不同的组件中时，* ngIf不会检测到变量。我看到了一些链接关于如何让兄弟姐妹成分互相交流，但说实话，我现在不知道我的需要是什么，或者它对我所看到的是否正确地图组件HTML

<agm-map [latitude]="lat" [longitude]="lng"  [styles]="mapStyle === 'dark' ? styleDark : styleLight">
        <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

地图组件.ts

styleDark: any;
styleLight: any;
mapStyle: String;

...

constructor(public zone: NgZone, private styleService: VariablesService ){}

ngOnInit() {
    this.mapStyle = this.styleService.getStyleRadioButton();
    this.styleDark =   this.darkStyle;
    this.styleLight =  this.defaultStyle
}

public darkStyle = [
     ...
];

public defaultStyle = [];

单选按钮组件HTML

<label class="container">Dark
    <input type="radio" checked="checked" name="radio" (click)='setMapStyle("dark")'>
    <span class="checkmark"></span>
</label>
<label class="container">Light
    <input type="radio" name="radio"  (click)='setMapStyle("light")'>
    <span class="checkmark"></span>
</label>

单选按钮组件.ts

...
constructor(private styleService : VariablesService, private mainMap: MainMapComponent) {}

setMapStyle(color) {
    this.styleService.setStyleRadioButton(color); 
    this.mapStyle = this.styleService.getStyleRadioButton();
    this.mainMap.ngOnInit(); //Trying to trigger the variables (the correct style gets trigger)
  }

服务档案

...
    @Injectable()
    export class VariablesService {
      styleRadioButton: String = 'dark';
      constructor() { }

      setStyleRadioButton (color) {
        this.styleRadioButton = color;
      }

      getStyleRadioButton () {
        return this.styleRadioButton;
      }

    }

Answer 1

要在n个组件之间传递数据，使用EventEmitter很容易... 您需要一个服务来定义EventEmitter，您可以将其注入一些组件以监听此事件，并在其他组件中发出传递其中一些数据的事件。

服务档案

定义EventEmitter以传递String数据......

@Injectable()
export class VariablesService {

  mapStyleEmitter = new EventEmitter<String>();

}

地图组件

订阅活动

constructor(public zone: NgZone, private styleService: VariablesService ){
 this.styleService.mapStyleEmitter.subscribe(
            (style:String) => mapStyle = style;
        );

}

单选按钮组件

使用数据

发出事件

...
constructor(private styleService : VariablesService, private mainMap:    MainMapComponent) {}

setMapStyle(color) {
    this.styleService.mapStyleEmitter.emit(color); 
}

在Angular5中让2个兄弟组件相互通信

1 个答案: