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

我正在玩Angular 2.0的

新路由器

，我尝试使用类似Angular 1.X ui路由器/ng路由解析机制的东西

我试图通过

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

使用此（

home

）的组件：

记录到控制台的数据不是我从服务初始化的数据。如果我在

@RouteConfig

中直接初始化它，它就会工作。例如：

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

因此，我缺少将数据从控制器/组件传递到

@RouteConfig

的部分

另一个问题-在Angular 1.X中，通过路由器的解析将数据传递到路由是一个很好的实践。使用

新路由器

/

组件路由器

，以这种方式将数据传递给组件，这仍然是一种良好的做法吗

编辑

---

可以找到解决方案-使用

@CanActivate

事件

您必须将@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' }
    ]);
  }
}

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

路由数据{数据：“测试样本”}

---

希望有帮助

更新

原创

添加了RC.4中的新路由器

resolve是用于查找数据解析器的DI令牌的映射。有关更多信息，请参阅解决

类TeamResolver实现解析{
构造函数（专用后端：后端）{}
解析（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：可观察的
请告诉我routeConfig中数据的好处是什么？此解决方案并不完美。它将传递数据（我要求的），但它不会等待数据得到解决。这个问题的最佳解决方案是找到可能的重复项。如果我在另一个问题之前差不多3个月问我的问题，它怎么可能是重复项？（：抱歉，我不确定它是否正确。我只是看了看谁有更多的投票权。可能的重复：this
resolve
consumer是否将可观测值转换为承诺并等待序列完成？而且我个人可能不想用几十个解析器类来扩展我的根命名空间或引导，每个类只有一个特殊的ized resolve操作；您知道您链接的参考指南中提到的“提供具有相同签名的函数而不是类”的任何示例吗？我真的很好奇，是否有关于承诺的基本解析接口的计划？请参阅问题：您的意思是“基于承诺的”？.我想不会。将可观测值转换为承诺比另一种方式更容易，但似乎可观测值无处不在，它们不再直接支持承诺。感谢您的响应。我正在努力将已解析的数据注入组件。http请求通过了，但应该使用什么方法参数我的组件构造函数包括？我发现了，但它似乎没有帮助。你能扩展你的示例吗？感谢对这个问题的评论（），你可以通过注入
ActivatedRoute
来访问解析的数据，并获得
route.snapshot.data
属性。
//@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' }
    ]);
  }
}

@Injectable()
export class CrisisDetailResolve implements Resolve<Crisis> {
  constructor(private cs: CrisisService, private router: Router) {}
  resolve(route: ActivatedRouteSnapshot): Promise<Crisis>|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;
    });
}

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

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