angular 2 ui-router：更改父状态的数据

Question

我有一个使用 Angular 2 和 UI-ROUTER（不是 NgRoute）的项目。

它有：
一个父状态'parent'，控制Header和Control的视图如下图所示，
两个子状态 'childA' 和 'childB'，控制 child

的视图

在进入任何子状态时说“childAState”，我需要将一些文本（如“childA”）传递给由父状态控制的 header 视图。我该怎么做？进入子状态时如何向父状态传递数据？

这个“childA”文本与任何组件无关，但与它正在进入的子状态有关。 （所以我认为我不应该通过组件树传递它。）

我这样定义状态：

export const parentState = {
    name: 'parent',
    url: '',
    redirectTo: 'childA',
    views: {
        'header': {
            component: HeaderComponent
        },
        'control-panel': {
            component: ControlComponent
        }
    }
};
export const childAState = {
    name: 'childA',
    parent: 'parent',
    url: '/childA',
    views: {
        'child@': {
            component: LayerAComponent
        }
    }
};
export const childBState = {
    name: 'childB',
    parent: 'parent',
    url: '/childB',
    views: {
        'child@': {
            component: LayerBComponent
        }
    }
};

谢谢！

Answer 1

将数据放在您所在州的 data 属性中，例如以下示例：

export const childAState = {
    name: 'childA',
    parent: 'parent',
    url: '/childA',
    data: {
        childData: 'childA'
    },
    views: {
        'child@': {
            component: LayerAComponent
        }
    }
};

在您的HeaderComponent 中，您可以使用Transition Hook 或router.globals.success$ observable 来监听状态变化。

import { TransitionService } from '@uirouter/angular';

@Component({})
class HeaderComponent {
  private unsub: Function;
  constructor(public transService: TransitionService) {}

  ngOnInit() {
    this.unsub = this.transService.onSuccess({}, transition => {
      const to = transition.to(); // The state that was just activated
      if (to.data && to.data.childData) {
        // do something
      }
    });
  }

  ngOnDestroy() {
    this.unsub();
  }
}

或

import { UIRouter } from '@uirouter/angular';

@Component({})
class HeaderComponent {
  private sub: Subscription;
  constructor(public router: UIRouter) {}

  ngOnInit() {
    this.sub = router.globals.success$.subscribe({}, transition => {
      const to = transition.to(); // The state that was just activated
      if (to.data && to.data.childData) {
        // do something
      }
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

Answer 2

您需要使用BehaviorSubject 进行服务。家长将观察该服务数据。

当子组件想要通知父组件时，它会更新服务。由于父母正在观察服务数据，因此它会收到通知并执行操作。这是组件以角度通信的方式之一，您可以使用该方法。