Question

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

它有：
父状态＆＃39;父级＆＃39;，控制标题和控制的视图，如下图所示，
两个孩子的状态＆＃39; childA＆＃39;和＆＃39; childB＆＃39;，控制孩子的视图

在进入任何儿童状态时，请说'childAState＆＃39;，我需要将一些类似于＆＃39; childA＆＃39;的文字传递给受控制的标题视图父母国家。我该怎么做？如何在进入子状态时将数据传递到父状态？

这个孩子A＆＃39; text与任何组件无关，但与其进入的子状态有关。（所以我不认为我应该通过组件树传递它。）

我定义了这样的状态：

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

将数据放在您的州＆＃39; data属性，如下例所示：

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

在您的HeaderComponent中，您可以使用转换挂钩或router.globals.success$可观察对来收听状态更改。

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提供服务。家长将观察该服务数据。

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

angular 2 ui-router：更改父状态

2 个答案: