角1.x的 - 通过组件状态解析数据到其他组件

我有一个虚拟的基于组件的应用程序，它具有以下组件：角1.x的 - 通过组件状态解析数据到其他组件

 
- App 
-- Page 
---- Breadcrumb

我想是到Page决心数据传递给Breadcrumb 。

这是Page配置的样子：

$stateProvider.state('page', { 
    url: '/page', 
    component: 'page', 
    resolve: { 
    routes: ($stateParams) => { 
    "ngInject"; 

    return [ 
     {url: "/", name: "Home"}, 
     {url: "/page", name: 'Page'} 
     ]; 
    } 
    } 
})

的Page控制器：

class PageController { 
    constructor($stateParams) { 
    "ngInject"; 


    this.themeColor = "#ff8fd1"; 

    // When i use static data it's works fine.. 
    //this.routes = [ 
    // {url: "/", name: "Main page"}, 
    // {url: "/page", name: 'Sub page'}, 
    //]; 

    this.routes = $stateParams.routes; 
    } 
}

这是我Breadcrumb组件：

let breadcrumbComponent = { 
    restrict: 'E', 
    bindings: { 
    themeColor: "&lt;", 
    routes: "&lt;" 
    }, 
    template, 
    controller 
};

的Breadcrumb的DOM组件：

<breadcrumb theme-color="$ctrl.themeColor" routes="$ctrl.routes"></breadcrumb>

每当我想从页面控制器解析方法中定义它时，路由都是未定义的。

如何等待数据，或在数据到达时再次绑定Breadcrumb？

来源

2016-08-04 Arpad Bajzath

一个简单的方法是使用ngIf指令只渲染breadcrumb组件时，路由解析：

<breadcrumb 
    ng-if="$ctrl.routes" 
    theme-color="$ctrl.themeColor" 
    routes="$ctrl.routes"></breadcrumb>

来源

2016-08-04 10:28:47 dfsq

尽我所知，角度组件的核心概念是没有双向bindig。所以在这种情况下，ngIf对我来说不是正确的解决方案...我想我必须重新定义应用程序的整个结构，而不是组件，也许我必须使用指令 –

正如我所说，这是简单的解决方案这在大多数情况下运作良好。另一个可能是使用$ onChanges钩子。 – dfsq

我想通了。

如果您想要将解析数据传递给组件，或者其他人必须将解析数据设置为父组件中的绑定。

 
// page.component.js 

let pageComponent = { 
    restrict: 'E', 
    bindings: { 
    routes: "<" 
    }, 
    template, 
    controller 
};

来源

2016-08-04 11:59:54

角1.x的 - 通过组件状态解析数据到其他组件

回答

相关问题