javascript - 如何在 Angular 中使用子函数调用父 bool 值

Question

我有 boolean，它是 toggleUnit，我有一个函数，它是 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;
     }
  }
}

weather.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>

weather.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);
}