如何在 angular 中使用 function 调用父 boolean 到子级

Question

我有boolean是toggleUnit ，我有 function 是onSwitch() 。 我还使用nz-switch来判断天气，它是Fahrenheit还是Celcius

list.component.html

<nz-switch [(ngModel)]="toggleUnit" nzCheckedChildren="&deg;F" nzUnCheckedChildren="&deg;C" (ngModelChange)="onSwitchChange()"></nz-switch>
 <div class="weather">
    <app-weather></app-weather>
</div>

list.component.ts

toggleUnit: boolean = false;
onSwitchChange() {
  switch (this.toggleUnit) {
     case true: {
       this.toggleUnit = true;
     }case false: {
       this.toggleUnit = false;
     }
  }
}

天气.component.ts

ngOnInit() {
    //console.log(this.toggleUnit);
    //trying to get the parent ``toggleUnit`` value, if its true or false
  }

Answer 1

您必须将值传递给您的子组件

list.component.html

<nz-switch [(ngModel)]="toggleUnit" nzCheckedChildren="&deg;F" nzUnCheckedChildren="&deg;C" (ngModelChange)="onSwitchChange()"></nz-switch>

<div class="weather">
  <app-weather [toggleUnit]="toggleUnit"></app-weather>
</div>

天气.component.ts

@Input() toggleUnit: boolean;

ngOnInit() {
  //console.log(this.toggleUnit);
  //trying to get the parent ``toggleUnit`` value, if its true or false
}

ngOnChanges(value) {
  // called when toggleUnit is updated from parent
  console.log(value);
  console.log(this.toggleUnit);
}