在组件之间共享变量

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

只需创建一个从父元素到子元素的绑定：

将字段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-apps 模板中的某个位置。

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

每次MainApp 中的route 字段更改时，这应该更新LoginForm 中的route 字段。

如果login-form 没有放在main-apps template 中，您也可以使用这种方法https://stackoverflow.com/a/29864797/217408