Question

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

/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-app模板内的某处。

<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

在组件之间共享变量

1 个答案: