角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的 - 通過組件狀態解析數據到其他組件

回答

相關問題