Angular：如何将子组件mat-slide-toggle状态传递给父组件？

在你的场景中，second是父组件，first是子组件，要将子组件的开关状态传递到父组件，需要利用Angular的**@Output()事件发射器**实现子向父的通信，具体步骤如下：

1. 修改first.component.ts，添加输出事件 #

将原有的@Input()替换为@Output()（@Input()用于父向子传值，子向父传值需要用@Output()），创建事件发射器来传递状态：

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent {
  selected = false;
  // 定义输出事件，用于向父组件发送状态变更
  @Output() selectedChange = new EventEmitter<boolean>();

  public OnToggle(event) {
    this.selected = event.selected;
    // 发射事件，把最新的开关状态传递给父组件
    this.selectedChange.emit(this.selected);
  }
}

2. 调整first.component.html（可选，优化绑定） #

模板可保持原有写法，若想支持Angular双向绑定语法，也可直接使用[(selected)]，效果一致：

<div>
  <mat-slide-toggle class="toggles" 
    (change)="OnToggle($event)"
    [(ngModel)]="selected">
    Toggle
  </mat-slide-toggle>
</div>

3. 在second.component.html中监听子组件事件 #

给<app-first>绑定我们定义的selectedChange事件，指定父组件的处理方法：

<div class="container">
  <app-first (selectedChange)="handleFirstToggle($event)"></app-first>
</div>

4. 在second.component.ts中接收并处理状态 #

实现handleFirstToggle方法，获取子组件传递过来的开关状态：

import { Component } from '@angular/core';

@Component({
  selector: 'app-second',
  templateUrl: './second.component.html',
  styleUrls: ['./second.component.css']
})
export class SecondComponent {
  // 存储从first组件传来的开关状态
  firstToggleState = false;

  handleFirstToggle(status: boolean) {
    this.firstToggleState = status;
    // 这里可根据状态执行你的业务逻辑
    console.log('First组件开关状态：', this.firstToggleState);
  }
}

原理说明 #

Angular父子组件通信规则：

• 父向子传值：使用@Input()
• 子向父传值：使用@Output() + EventEmitter，子组件通过emit()发射事件并携带数据，父组件通过绑定事件接收数据。

内容的提问来源于stack exchange，提问作者marshmellow