dart - 在组件之间共享变量

Question

我有一个使用 login_form 组件的主应用程序组件，当提交登录表单时，我想使用路由器将页面重定向到主页。

/main_app/main_app.dart

@CustomTag('main-app')
class MainApp extends PolymerElement {
  @observable String route;

  final Router router = new Router();

  MainApp.created() : super.created();

  ready() {
    print('Main App: ready()');

    router.root
      ..addRoute(name: 'home', path: '/', enter: showHome, defaultRoute: true)
      ..addRoute(name: 'login', path: '/#!/login', enter: showLogin);

    router.listen();
  }

  void showHome(RouteEvent event) {
    print("Main App: showHome()");

    route = event.route.name;
  }

  void showLogin(RouteEvent event) {
    print("Main App: showLogin()");

    route = event.route.name;
  }
}

/login_form/login_form.dart

@CustomTag('login-form')
class LoginForm extends PolymerElement {
  @observable String username;
  @observable String password;

  LoginForm.created() : super.created();

  void submit(Event event, Object detail, Node sender) {
    // Form submit
    // Access router here
    // ie. router.go('home', {});
  }
}

我找到了像这样使用单例的解决方案

static final Router _sharedRouter = new Router();
static Router get sharedRouter => _router;

然后

MainApp.sharedRouter.go('home', {}}

有一个更好的方法吗？

Answer 1

只需创建从父元素到子元素的绑定(bind):

添加字段 route给您的login-form

@CustomTag('login-form')
class LoginForm extends PolymerElement {
  ...
  String route;

  LoginForm.created() : super.created();

  void submit(Event event, Object detail, Node sender) {
    // Form submit
    // Access router here
    // ie. router.go('home', {});
  }
}

我假设您已将 login-form main-app 内的某处s 模板。

<polymer-element name="main-app">
  <template>
    ...
    <login-form route="{{route}}"><login-form>
    ...
  </template>
</polymer-element>

这应该会更新 route LoginForm 中的字段每次 route MainApp 中的字段更改.

如果 login-form未放置在 main-apps 内 template你也可以使用这种方法 https://stackoverflow.com/a/29864797/217408