在子组件中访问父组件变量（ng-view 嵌套路由）

Question

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

我想访问在名为 'edit_menuitem_controller' 的组件中声明的变量，其中有一个变量 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>

Answer 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");
    }

  }

在子组件中访问父组件变量（ng-view 嵌套路由）

Accessing parent component variables in child component (ng-view nested routes)

dart

shadow-dom

angular-dart