角度1.xの - 他のコンポーネントにコンポーネントの状態の解決データを渡し

Question

私は、次のコンポーネントがありダミーコンポーネント・ベースのアプリケーション、持っている：私が欲しいもの

 
- App 
-- Page 
---- Breadcrumb 

はBreadcrumbにPage解決データを渡すことです。

これは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: "<", 
    routes: "<" 
    }, 
    template, 
    controller 
}; 

BreadcrumbのDOMコンポーネント：

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

Pageコントローラの解決メソッドから定義するときはいつも、経路は未定義です。

データが到着したら、データを待つか、Breadcrumbをもう一度バインドしますか？

Answer 1

一つの簡単な方法は、ルートが解決されるだけbreadcrumbコンポーネントレンダリングするngIfディレクティブを使用することです：

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

Answer 2

を私は考え出しました。

データをコンポーネントに渡したい場合や、別のデータを親コンポーネントのバインディングとして設定する必要がある場合は、

 
// page.component.js 

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