我的'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> 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> Preview</a></p>
<p><a href=""><span class="fa fw fa-bookmark"></span> 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> {{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> Info Settings</a></p>
<p><a href=""><span class="fa fw fa-desktop"></span> 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> Total Items</a></p>
<p class="add-another"><a href=""><span class="fa fw fa-plus"></span> 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>
答案 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");
}
}