javascript - Angular 1.x - 将组件状态解析数据传递给其他组件

Question

我有一个基于虚拟组件的应用程序，它具有以下组件:

- App
-- Page
---- Breadcrumb

What i want is to pass the Page resolve data to the Breadcrumb.

This is how the Page config looks like:

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

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

Page Controller :

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>

每当我想从页面 Controller 解析方法定义路由时，路由都未定义。

如何等待数据，或者绑定(bind)Breadcrumb当数据到达时再一次？

Answer 1

一种简单的方法是仅在解析路由时使用 ngIf 指令渲染 breadcrumb 组件:

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