Question

我有一个基于虚拟组件的应用程序，它包含以下组件：

- 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？

Answer 1

一种简单的方法是仅在解析路由时使用ngIf指令来呈现breadcrumb组件：

<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
};

Angular 1.x - 将组件状态解析数据解析到其他组件

2 个答案: