访问子组件中的父组件变量(ng-view嵌套路由)

时间:2015-03-22 03:48:20

标签: dart angular-dart shadow-dom

我的'admin'路线有一个名为'edit /:category'的挂载。

我想访问名为'edit_menuitem_controller'的组件内声明的变量,该变量有一个变量say menuItemMap。我曾经能够在'editor_controller的名为''的自定义元素中访问它,如下所示:

<editor menu-item-map="menuItemMap"></editor>

但现在,它说menuItemMap为null,即使父视图仍然存在,它也不会从父组件中获取值。

我曾参考过这个项目并且之前能够实现我的目标,但它现在已经过时了:https://github.com/vadimtsushko/angular_objectory_demo

edit_menuitem_controller.dart:

@Component(
selector:'edit-menu-item',
  templateUrl: 'edit_menuitem_controller.html',
  useShadowDom: false
)
class EditMenuItemController implements ScopeAware{
  final Http _http;
  final QueryService _queryService;
  final CommonService _commonService;
  final Router _router;
  final RouteProvider _routeProvider;

  bool menuItemsLoaded = false;

  Map<String, MenuItem> _menuItemMap = {};
  Map<String, MenuItem> get menuItemMap => _menuItemMap;
  List<List<MenuItem>> _properMenuItems = [];
  List<List<MenuItem>> get properMenuItems => _properMenuItems;
  List<String> _categories = [];
  List<String> get categories => _categories;
  EditMenuItemController(this._http,this._queryService, this._commonService,this._router, this._routeProvider, this.modal){}

  void selectCategory(String category){
    _router.go('edit-mode', {'category':category}, startingFrom: _router.root.findRoute('admin'));
  }
}

selectCategory()函数转到必需的路径并启动editor_controller

editor_controller.dart

@Component(
    selector: 'editor',
    templateUrl: 'editor_controller.html',
    useShadowDom: false
)
class EditorController{

  final Router _router;
  final RouteProvider _routeProvider;
  final QueryService _queryService;

  @NgOneWay('proper-menu-items')
  List<List<MenuItem>> properMenuItems;


  String _selectedCategory;
  List<MenuItem> _categoryWiseItems = [];
  List<MenuItem> get categoryWiseItems => _categoryWiseItems;

  EditorController(this._router,this._routeProvider,this._queryService){
    _selectedCategory = _routeProvider.parameters['category'];
    if(properMenuItems != null){
      properMenuItems.forEach((list){
        if(_selectedCategory == list.first.category){
          _categoryWiseItems = list;
        }
      });
    }
    else{
      print("properMenuItems is null");
    }
  }

总是给我“properMenuItems is null”

我的路由配置是这样的:

restaurant_router.dart

void restaurantRouteInitializer(Router router, RouteViewFactory views){
  views.configure({
    'add': ngRoute(
        path: '/add',
        view: 'view/addMenuItem.html'),
    'admin': ngRoute(
        path: '/admin',
        view: 'view/editMenuItem.html',
        mount: {
          'edit-mode': ngRoute(
              path: '/edit/:category',
              view: 'view/editor.html')
        }),
    'view': ngRoute(
        path: '/view',
        view: 'view/menuController.html'
        ),
    'kitchen': ngRoute(
        path: '/kitchen',
        view: 'view/kitchen.html'
        ),
    'register_table': ngRoute(
        path: '/table/:table_num',
        viewHtml: '<register-table></register-table>'),
    'test': ngRoute(
        path: '/test',
        viewHtml: '<test></test>'),
    'default_page': ngRoute(
        defaultRoute: true,
        enter: (RouteEnterEvent e){
          router.activePath.forEach((e){
            print("Something to do with router : ${e}");
          });
          router.go('view', {});
        })
  });
}

最后是我的HTML:

edit_menuitem_controller.html

<div ng-switch="menuItemsLoaded">
  <div ng-switch-when="false">

  </div>
  <div ng-switch-when="true">
    <span class="hide">{{allMenuItems.length}}</span>
    <div class="wrap">
      <!--SIDEBAR-->
      <div class="col-md-2 sidebar">
        <div class="row">
          <section> 
            <h4 class="sidebar-head"><span class="fa fw fa-sliders"></span> &nbsp;Dashboard</h4>
          </section>
          <div class="border"></div>
          <section>
            <p class="section-head">BASIC SETTINGS</p>
            <p><a href=""><span class="fa fw fa-eye"></span> &nbsp;Preview</a></p>
            <p><a href=""><span class="fa fw fa-bookmark"></span> &nbsp;Another Preview</a></p>
          </section>
          <section>
            <p class="section-head">Menu categories</p>
            <span ng-repeat="list in properMenuItems">
            <p class="pointer" ng-click="selectCategory(list.first.category)"><a><span class="fa fw caret-right"></span> &nbsp;{{list.first.category}}</a></p>
            </span>
            </section>
          <section>
            <p class="section-head">general Settings</p>
            <p><a href=""><span class="fa fw fa-cog"></span> &nbsp;Info Settings</a></p>
            <p><a href=""><span class="fa fw fa-desktop"></span> &nbsp;Display Settings</a></p>
          </section>
          <div class="border"></div>
          <section>
            <p class="section-head">Add Item</p>
            <p><a href=""><span class="fa fw">{{allMenuItems.length}}</span> &nbsp;Total Items</a></p>
            <p class="add-another"><a href=""><span class="fa fw fa-plus"></span> &nbsp;Add an item</a></p>
          </section>
        </div>
      </div> <!--./col-->
      <!--BLOG COLUMN-->

      <div class="col-md-10 col-md-push-2 gen-sec">

       <div class="well">
         <p>Sample
         </p>
       </div>

<!-- HERE IS THE NESTED VIEW -->
       <ng-view></ng-view>

      </div><!-- ./col -->
     <div style="clear:both"></div>       
   </div>
</div>
</div>

1 个答案:

答案 0 :(得分:1)

构造函数甚至在附加元素之前就会给出元素属性的值。因此,我们需要实施AttachAware并听取attach(),然后才进行进一步的操作。

我修改了我的代码以允许正确执行,如下所示:

editor_controller.dart

@Component(
    selector: 'editor',
    templateUrl: 'editor_controller.html',
    useShadowDom: false
)
class EditorController implements AttachAware{

  final Router _router;
  final RouteProvider _routeProvider;
  final QueryService _queryService;

  @NgOneWay('menu-item-map')
  Map<String, MenuItem> menuItemMap;
  @NgOneWay('proper-menu-items')
  List<List<MenuItem>> properMenuItems;
  @NgOneWay('categories')
  List<String> categories;

  String _selectedCategory;
  List<MenuItem> _categoryWiseItems = [];
  List<MenuItem> get categoryWiseItems => _categoryWiseItems;

  EditorController(this._router,this._routeProvider,this._queryService){
    _selectedCategory = _routeProvider.parameters['category'];
    /*
    print("menuItemMap is $menuItemMap");
    print("properMenuItems is $properMenuItems");
    print("categories is $categories");

    always gave null
    */
  }

  void attach(){
    /*
    print(menuItemMap);
    print(properMenuItems);
    print(categories);

    prints values as intended
    */

    if(properMenuItems != null){
      properMenuItems.forEach((list){
        if(_selectedCategory == list.first.category){
          _categoryWiseItems = list;
        }
      });
    }
    else{
      print("properMenuItems is null");
    }

  }