如何访问子组件中的Web组件并判断six-drawer的open属性状态

有几种常见方法可以从父组件获取six-drawer的open属性状态：

方法1：通过模板引用变量 + @ViewChild直接访问组件实例 #

首先在模板中给six-drawer添加一个模板引用变量：

<six-drawer #notificationDrawer label="Notificaciones" class="notifications">
  <mur-notification-dialog (newEmision)="listenNewEmision($event)"></mur-notification-dialog>
  <six-button slot="footer" class="open-all-notifications-button" (click)="openNotifications()">
    Ver todas las notificaciones
  </six-button>
</six-drawer>

然后在父组件的TypeScript代码中，通过@ViewChild获取组件实例，直接读取open属性：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { SixDrawer } from 'path-to-six-drawer'; // 替换为实际的组件导入路径

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements AfterViewInit {
  @ViewChild('notificationDrawer') notificationDrawer!: SixDrawer;

  ngAfterViewInit() {
    // 组件初始化完成后检查状态
    const isDrawerOpen = this.notificationDrawer.open;
    console.log('抽屉当前状态：', isDrawerOpen);
  }

  // 在任意需要的方法中检查状态
  checkDrawerStatus() {
    const isDrawerOpen = this.notificationDrawer.open;
    // 执行你的业务逻辑
  }
}

方法2：双向绑定open属性到父组件变量 #

如果需要实时同步抽屉的开闭状态，可以用双向绑定把open属性绑定到父组件的变量上，直接通过变量获取状态：

修改模板：

<six-drawer label="Notificaciones" class="notifications" [(open)]="isDrawerOpen">
  <mur-notification-dialog (newEmision)="listenNewEmision($event)"></mur-notification-dialog>
  <six-button slot="footer" class="open-all-notifications-button" (click)="openNotifications()">
    Ver todas las notificaciones
  </six-button>
</six-drawer>

父组件TypeScript代码：

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  isDrawerOpen = false; // 初始状态可按需设置

  // 随时通过该变量检查抽屉状态
  handleSomeAction() {
    if (this.isDrawerOpen) {
      // 抽屉打开时的逻辑
    } else {
      // 抽屉关闭时的逻辑
    }
  }
}

方法3：监听抽屉状态变化事件 #

如果six-drawer组件提供了状态变化的输出事件（比如open-change，具体名称需参考组件文档），可以通过监听该事件同步状态：

模板修改：

<six-drawer label="Notificaciones" class="notifications" (open-change)="onDrawerStatusChange($event)">
  <mur-notification-dialog (newEmision)="listenNewEmision($event)"></mur-notification-dialog>
  <six-button slot="footer" class="open-all-notifications-button" (click)="openNotifications()">
    Ver todas las notificaciones
  </six-button>
</six-drawer>

父组件TypeScript代码：

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  currentDrawerStatus = false;

  onDrawerStatusChange(isOpen: boolean) {
    this.currentDrawerStatus = isOpen;
    console.log('抽屉状态更新：', isOpen);
    // 在这里处理状态变化后的逻辑
  }

  checkStatus() {
    console.log('当前抽屉状态：', this.currentDrawerStatus);
  }
}

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