小编Zie*_*mdi的帖子

我有一个事件总线，可以处理我应用程序中的所有中央事件。我有一种特殊情况，即我有一系列异步动作，只想执行一次（发生特殊事件时），所以我必须启动一个异步函数，使其失去控制，其他函数将触发一个事件。我的第二个动作，依此类推。

所以我需要启动动作一，然后听事件总线等待动作一触发（不直接）触发将启动动作二的事件，依此类推...

自然，一旦执行了序列的每个元素，我就想停止监听触发它的事件。

为此，我想像了一个ConsumerOnce（event，action）函数，该函数将订阅总线，等待预期的事件，在接收到事件时执行该动作，并在动作启动后立即取消订阅（异步）

  final StreamController<Map<PlaceParam, dynamic>> _controller =
  new StreamController<Map<PlaceParam, dynamic>>.broadcast();

  void consumeOnce(PlaceParam param, Function executeOnce) {
    StreamSubscription subscription = _controller.stream.listen((Map<PlaceParam, dynamic> params) {
      if(params.containsKey(param)) {
        executeOnce();
        subscription.cancel(); //can't access, too early: not created yet
      }
    });
  }

问题是我无法在回调的主体中访问变量预订，因为当时尚未创建变量预订

由于监听器不会按照订阅顺序执行任何担保，因此我无法注册另一个将删除我的订阅的订阅者（即使执行顺序得到保证，无论如何我都会找到无法删除的订阅来找到自己：负责删除我的原始订阅）...

有什么想法吗？

这种模式可以解决我的问题，但是我觉得它并不优雅：

@Injectable()
class EventBus<K, V> {
  final StreamController<Map<PlaceParam, dynamic>> _controller =
  new StreamController<Map<PlaceParam, dynamic>>.broadcast();

  Future<Null> fire(Map<PlaceParam, dynamic> params) async {
    await _controller.add(params);
  }

  Stream<Map<PlaceParam, dynamic>> getBus() {
    return _controller.stream;
  }


  void consumeOnce(PlaceParam param, Function executeOnce) …

我将服务器端渲染(SSR) 工作应用程序迁移到 MUI 版本 5。我遵循了官方程序，但是当我禁用 JavaScript 时，我收到了一个原始 HTML 页面（没有 CSS）。您可以在此处看到它（如果它已关闭，抱歉；我经常重新部署以进行测试）。

\n
1. 运行 codemod（v5.0.0/preset-safe 和 link-underline-hover）
\n
2. 更改了 makeStyles 调用以使用tss-react
\n
3. 根据Next.js 的 MUI 示例修改了我的_app和_document文件
\n

我启动了官方SSR Next.js 实现。它表明它也不起作用。

有关更多详细信息，以下是我的项目中的关键文件：

_app.js

import * as React from \'react\';\nimport Head from \'next/head\';\nimport {ThemeProvider} from \'@mui/material/styles\';\nimport CssBaseline from \'@mui/material/CssBaseline\';\nimport {CacheProvider} from \'@emotion/react\';\nimport theme from \'../components/theme\';\nimport createEmotionCache from "../lib/createEmotionCache";\nimport {StyledEngineProvider} from \'@mui/material/styles\';\nimport {ApolloProvider} from "@apollo/client";\nimport …

我需要一个组件来选择具有双向绑定的用户角色

角色选择器,comp.html

<div class="roleChooser">
  <role-item #owner (select)="role(owner.role)" [role]="'owner'" [title]="'Owner'"></role-item>
  <role-item #writer (select)="role(writer.role)" [role]="'writer'" [title]="'Writer'"></role-item>
  <role-item #viewer (select)="role(viewer.role)" [role]="'viewer'" [title]="'Reader'"></role-item>
</div>

它的类如下:

角色选择器,comp.dart

@Component(
    selector: 'role-chooser-comp',
    templateUrl: 'role_chooser_comp.html',
    styleUrls: const ['role_chooser_comp.css'],
    directives: const [RoleItem])
class RoleChooser implements OnInit {
  final PlaceService _placeService;
  final Router _router;
  final Environment _environment;

  @ViewChild('owner') RoleItem owner;
  @ViewChild('writer') RoleItem writer;
  @ViewChild('viewer') RoleItem viewer;
  List<RoleItem> choices;
  String lastSelected;

  RoleChooser(this._placeService, this._router, this._environment) {

  }

  Future<Null> ngOnInit() async {
    choices = [owner, writer, viewer];
    if (lastSelected != null)
      role(lastSelected);
  } …