Angular 2 - 相当于路由器解析新路由器的数据

我正在玩Angular 2.0 new router,我尝试使用类似于Angular 1.X ui-router/ng-route解析机制的东西.

我试图通过以下方式实现此目的RouteData:

import {Component, ViewEncapsulation} from 'angular2/core';
import {
  RouteConfig,
  ROUTER_DIRECTIVES
} from 'angular2/router';
// import {HTTP_PROVIDERS} from 'angular2/http';

import {HomeCmp} from '../home/home';
import {AboutCmp} from '../about/about';
import {NameList} from '../../services/name_list';
import {PersonalizationList} from '../../services/personalization_list';

@Component({
  selector: 'app',
  viewProviders: [NameList, PersonalizationList],
  templateUrl: './components/app/app.html',
  styleUrls: ['./components/app/app.css'],
  encapsulation: ViewEncapsulation.None,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path: '/', component: HomeCmp, as: 'Home', data: this.history },
  { path: '/about', component: AboutCmp, as: 'About' }
])
export class AppCmp {
  history: string[] = [];
  constructor(public list: PersonalizationList) {
    list.get('histoy', (response) => {
      this.history = response;
    });
  }
}

使用this(home)的组件:

import {Component} from 'angular2/core';
import {PersonalizationList} from '../../services/personalization_list';
import {Router, ROUTER_DIRECTIVES, routerBindings, RouteConfig, RouteData} from 'angular2/router';

@Component({
  selector: 'home',
  templateUrl: './components/home/home.html',
  styleUrls: ['./components/home/home.css'],
  directives: [ROUTER_DIRECTIVES]
})
export class HomeCmp {
  constructor(data: RouteData) {
    console.log(data);
  }
}

记录到控制台的数据不是我从服务初始化的数据.如果我直接初始化它@RouteConfig,它将起作用.例如:

@RouteConfig([
  { path: '/', component: HomeCmp, as: 'Home', data: [1,2,3,4] },
  { path: '/about', component: AboutCmp, as: 'About' }
])

所以,我错过了从控制器/组件传递数据的部分@RouteConfig.

另一个问题 - 在Angular 1.X中,通过路由器的解决方案将数据传递到路由是一种很好的做法.以这种方式将数据传递给组件仍然是一种很好的做法,使用new router/ components router？

编辑 可以在此处找到解决方案- 使用@CanActivate事件

1> user3636086..：

---

您必须将@RouteConfig移动到AppCmp构造函数中:

//@RouteConfig([
//  { path: '/', component: HomeCmp, as: 'Home', data: this.history },
//  { path: '/about', component: AboutCmp, as: 'About' }
//])
export class AppCmp {
  history: string[] = [];
  constructor(public list: PersonalizationList,
              private router_: Router) {
    list.get('histoy', (response) => {
      this.history = response;
    });
    router_.config([
      { path: '/', component: HomeCmp, as: 'Home', data: this.history },
      { path: '/about', component: AboutCmp, as: 'About' }
    ]);
  }
}

在控制台输出上我可以看到:

RouteData {data:"test sample"}

希望能帮助到你!

2> Günter Zöchb..：

---

更新

@Injectable()
export class CrisisDetailResolve implements Resolve {
  constructor(private cs: CrisisService, private router: Router) {}
  resolve(route: ActivatedRouteSnapshot): Promise|boolean {
    let id = route.params['id'];
    return this.cs.getCrisis(id).then(crisis => {
      if (crisis) {
        return crisis;
      } else { // id not found
        this.router.navigate(['/crisis-center']);
        return false;
      }
    });
  }
}

  children: [
  {
    path: ':id',
    component: CrisisDetailComponent,
    canDeactivate: [CanDeactivateGuard],
    resolve: {
      crisis: CrisisDetailResolve
    }
  },

ngOnInit() {
  this.route.data
    .subscribe((data: { crisis: Crisis }) => {
      this.editName = data.crisis.name;
      this.crisis = data.crisis;
    });
}

https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard

原版的

得到了在RC.4新的路由器解决增加

resolve是用于查找数据解析器的DI令牌的映射.有关详细信息,请参阅Resolve.

class TeamResolver implements Resolve {
  constructor(private backend: Backend) {}
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable {
    return this.backend.fetchTeam(this.route.params.id);
  }
}

bootstrap(AppComponent, [
  TeamResolver,
  provideRouter([{
    path: 'team/:id',
    component: TeamCmp,
    resolve: {
      team: TeamResolver
    }
  }])
);

另请参见RouterConfig

---

这个`resolve`使用者是否将observable转换为promise并等待序列完成？另外,我个人可能不希望使用几十个解析器类来扩充我的根命名空间或引导程序,每个解析程序只有一个专门的解析操作; 你知道在你提供的参考指南中提到的"提供具有相同签名而非课程的功能"的任何例子吗？

---

感谢对此问题的评论(http://stackoverflow.com/questions/33462532/using-resolve-in-angular2-routes)您可以通过注入```ActivatedRoute```来获取已解析的数据并获取` ``route.snapshot.data```属性.