打开和关闭多个 Angular Material 个底页

Question

这是我正在处理的场景：

我们的 Web 应用程序的业务逻辑需要一个接一个地打开多个对话框，然后一个接一个地关闭它们（就像通常的对话框 UI 堆栈一样）
使用 multiple: true 选项

mdDialog

我们正在考虑将对话框转换为滑动面板（从右边开始，如果重要的话），并且在使用 CSS 恶作剧之后，我们重新设计了 mdBottomSheet（这是对我们的用例最有用，即使它最初是从底部而不是从右边打开的）
它与预期的 multiple: true 一起工作，因为它是一个重新设计的 mdDialog（即使没有正确记录）但它引入了一个主要问题...

问题：假设您打开了一个主对话框，然后打开了一个辅助对话框。当您关闭辅助设备时，它也会关闭主设备，这不是预期的结果。基本上，关闭子对话框会关闭主对话框（以及所有其他子对话框）。

我们找到的一个解决方案是使用 preserveScope: true 选项，但它引入了一个主要的资源泄漏，因为它保持关闭对话框的不再相关的范围完好无损并且运行所有相关问题（错误的逻辑、不需要的观察者、错误 DOM 元素等）。在对话框关闭后尝试有选择地杀死任何剩余范围会杀死所有仍然打开的对话框（与 preserveScope: false...）

所以基本上，我们正在寻找一种既能吃蛋糕又能吃蛋糕的方法 - 既有 "bottom sheet" 从右侧滑动的功能，又能像普通对话框一样使用多个对话框。

顺便说一下，Angular Material 团队要求正确实现此类功能，但目前它仍处于开发阶段...

我想要一些有趣的想法，如果你知道或能想到任何（我们即将让 mdDialog 看起来像 mdBottomSheet [因此重新实现它我们自己，本质上] 或为 AngularJS 重新实现 Redux 来管理对话框状态 - 并且真的非常想避免 :)).

版本： AngularJS (angular 1.6.6) 和 Angular Material (angular-material 1.1.5)

Answer 1

好的，我找到的实际解决方案是编辑 MdBottomSheetDirective 的定义并删除 $destroy 事件侦听器。

所以，而不是：

/* @ngInject */
function MdBottomSheetDirective($mdBottomSheet) {
  return {
    restrict: 'E',
    link : function postLink(scope, element) {
      element.addClass('_md');     // private md component indicator for styling

      // When navigation force destroys an interimElement, then
      // listen and $destroy() that interim instance...
      scope.$on('$destroy', function() {
        $mdBottomSheet.destroy();
      });
    }
  };
}

我正在使用：

/* @ngInject */
function MdBottomSheetDirective($mdBottomSheet) {
  return {
    restrict: 'E',
    link : function postLink(scope, element) {
      element.addClass('_md');     // private md component indicator for styling
    }
  };
}

令人惊讶的是，它完全按照要求工作，没有副作用（即关闭要关闭的对话框，其范围被破坏并且没有其他对话框受到影响） - 即使在网络应用程序中导航时也是如此。

如果有人知道它为什么有效 - 如果您发表评论，我将不胜感激。

打开和关闭多个 Angular Material 个底页

Opening and closing multiple Angular Material Bottom Sheets

angularjs

angular-material

mddialog