Angular 5中点击子组件menu-item时如何关闭popover菜单？

刚好我之前处理过类似的自定义组件交互场景，结合你给出的popover-menu和menu-item结构，我分两个问题给你具体的实现方案：

1. 点击menu-item时关闭popover-menu #

核心思路是子组件向父组件传递事件：menu-item被点击时触发一个自定义事件，popover-menu监听这个事件并修改自身的显示状态。

Vue框架下的实现示例 #

首先改造menu-item组件，在点击时向外触发事件：

<!-- MenuItem.vue -->
<template>
  <div @click="triggerItemClick">
    <slot></slot>
  </div>
</template>

<script>
export default {
  methods: {
    triggerItemClick() {
      // 触发自定义事件，通知父组件（popover-menu）
      this.$emit('menu-item-click');
    }
  }
}
</script>

然后在popover-menu组件中监听这个事件，控制菜单的显示/隐藏：

<!-- PopoverMenu.vue -->
<template>
  <!-- 用v-show控制菜单可见性 -->
  <div v-show="isMenuVisible" class="popover-menu">
    <!-- 监听子组件的自定义事件，触发关闭逻辑 -->
    <slot @menu-item-click="closeMenu"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMenuVisible: true // 初始状态为显示
    }
  },
  methods: {
    closeMenu() {
      this.isMenuVisible = false;
    }
  }
}
</script>

这样每次点击任意menu-item，都会触发closeMenu方法，隐藏popover-menu。

2. 在popover-menu外部获取菜单状态 #

这里需要实现组件状态的双向绑定，让外部可以通过一个布尔变量实时知晓菜单的显示/隐藏状态，同时也能通过这个变量控制菜单。

Vue框架下的实现示例（基于v-model） #

改造popover-menu组件，支持v-model双向绑定：

<!-- PopoverMenu.vue -->
<template>
  <div v-show="localVisible" class="popover-menu">
    <slot @menu-item-click="closeMenu"></slot>
  </div>
</template>

<script>
export default {
  props: {
    // 接收外部传入的v-model值
    value: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    // 用计算属性实现双向绑定的中间层
    localVisible: {
      get() {
        return this.value;
      },
      set(newVal) {
        // 触发input事件，同步状态到外部
        this.$emit('input', newVal);
      }
    }
  },
  methods: {
    closeMenu() {
      this.localVisible = false;
    }
  }
}
</script>

然后在外部父组件中使用：

<!-- 父组件 -->
<template>
  <div class="main">
    <popover-menu v-model="isMenuVisible">
      <menu-item> Menu 1 </menu-item>
      <menu-item> Menu 2 </menu-item>
      <menu-item> Menu 3 </menu-item>
    </popover-menu>
    <!-- 直接通过isMenuVisible知晓菜单状态 -->
    <p>当前菜单状态：{{ isMenuVisible ? '显示中' : '已隐藏' }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMenuVisible: true // 外部控制的状态变量
    }
  }
}
</script>

React框架下的实现思路 #

如果是React项目，核心逻辑类似：通过props传递状态和回调函数，子组件更新状态时调用回调同步给父组件：

// PopoverMenu.jsx
import { useState, useEffect } from 'react';

export function PopoverMenu({ visible, onVisibleChange, children }) {
  const [localVisible, setLocalVisible] = useState(visible);

  // 同步外部传入的visible状态
  useEffect(() => {
    setLocalVisible(visible);
  }, [visible]);

  const closeMenu = () => {
    setLocalVisible(false);
    onVisibleChange(false);
  };

  // 给每个MenuItem绑定点击事件
  const renderedChildren = React.Children.map(children, child => {
    if (child.type.name === 'MenuItem') {
      return React.cloneElement(child, { onClick: closeMenu });
    }
    return child;
  });

  return (
    <div style={{ display: localVisible ? 'block' : 'none' }}>
      {renderedChildren}
    </div>
  );
}

// MenuItem.jsx
export function MenuItem({ children, onClick }) {
  return (
    <div onClick={onClick} style={{ padding: '8px', cursor: 'pointer' }}>
      {children}
    </div>
  );
}

// 父组件使用
export function Main() {
  const [isMenuVisible, setIsMenuVisible] = useState(true);

  return (
    <div className="main">
      <PopoverMenu 
        visible={isMenuVisible} 
        onVisibleChange={setIsMenuVisible}
      >
        <MenuItem>Menu 1</MenuItem>
        <MenuItem>Menu 2</MenuItem>
        <MenuItem>Menu 3</MenuItem>
      </PopoverMenu>
      <p>当前菜单状态：{isMenuVisible ? '显示中' : '已隐藏'}</p>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者S. K.