Обмен переменными между компонентами

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; 

th ru

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-appstemplate вы также можете использовать этот подход https://stackoverflow.com/a/29864797/217408