Question

首先：我现在构建的应用程序是Angular2（RC3）（使用@ angular / routerv3.0.0-alpha.8模块）。

此应用程序包含一个父组件，其中包含应根据当前路由选择的不同标头组件。简而言之：

route: localhost:4200/login => display login header component,
route: localhost:4200/home => display home header component etc.

在父组件模板中，有一个看起来像的开关：

<span [ngSwitch]="dataStore.currentRoute">
    <span *ngSwitchCase="'/login'"><login-header></login-header></span>
    <span *ngSwitchCase="'/home'"><home-header></home-header></span>
</span>
<div class="content"><router-outlet></router-outlet></div>
<app-footer></app-footer>

父组件中的 dataStore 定义为：

private dataStore: {
    currentRoute: string
};

到目前为止，我的所有努力都没有产生可行的解决方案。我尝试创建一个提供自定义Observable的routeStore，如下所示：

@Injectable()
export class RouteStore {
    private dataStore: {
        currentRoute: string
    };
    private _currentRoute$: BehaviorSubject<string>;

    constructor(private routeHelper: RouteHelperService) {
        this.dataStore = {currentRoute: this.routeHelper.getCurrentBaseRoute()};
        this._currentRoute$ = <BehaviorSubject<string>>new BehaviorSubject(this.dataStore.currentRoute);
    }

    get currentRoute$() {
        return this._currentRoute$.asObservable();
    }

    public updateCurrentRoute() {
        this.dataStore = {currentRoute: this.routeHelper.getCurrentBaseRoute()};
        this._currentRoute$.next(this.dataStore.currentRoute);
    }
}

当我通过按钮点击导航到另一条路线时，此部分能够向父母提供数据：

userIconClick(userName: string) {
    this.router.navigate(['/home', userName]).then(() => this.routeStore.updateCurrentRoute());
  }

但是只要我刷新页面或初始化应用程序就会抛出

Expression has changed after it was checked.

错误。

我还努力只使用像

这样的路由器来处理父组件内的所有路由更改

this.route.url.subscribe(urlPathArray => this.dataStore.currentRoute = '/' + urlPathArray[0].path);

没有产生可接受的结果，因为 urlPathArray 的路径属性总是返回一个空字符串（意味着父组件的路由）。

如何将当前活动路由传递给父组件 dataStore 对象 currentRoute 属性以重新运行ngSwitch语句并显示正确的标题？

Answer 1

这可以使用路由器events来处理。添加订阅事件检查NavigationEnd对象并将逻辑移到那里

$items = ContentIndexQuery::create();
$i = 0;

foreach ($contentIndexes as $id = > $type) {
    if ($i > 0) $items->_or();

    $items->condition('cond1'.$i, ContentIndexTableMap::COL_ITEM_ID . ' = ?', $id)
          ->condition('cond2'.$i, ContentIndexTableMap::COL_ITEM_TYPE . ' = ?', $type)
          ->where(['cond1'.$i, 'cond2'.$i], 'AND');

    $i += 1;
}

$items = $items->find()->getData();

Angular2：提供父组件的当前路由

1 个答案: