相关疑难解决方法(0)

在Angular 1中,我的配置如下所示:

$routeProvider
  .when("/news", {
    templateUrl: "newsView.html",
    controller: "newsController",
    resolve: {
        message: function(messageService){
            return messageService.getMessage();
    }
  }
})

如何在Angular2中使用resolve？

我正在玩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 …

我们使用Selenium WebDriver自动化基于UI的测试.我们的挑战之一是检测页面何时真正完成加载,而Angular 1在这方面也是一个挑战.我们最终执行这段代码专门检测Angular 1是否完成:

if(typeof window.angular !== \"undefined\")
{
  var injector = window.angular.element(\"*[ng-app]\").eq(0).injector();

  if(injector)
  {
    var $rootScope = injector.get(\"$rootScope\");
    var $http = injector.get(\"$http\");

    if($rootScope.$$phase === \"$apply\" || $rootScope.$$phase === \"$digest\" || $http.pendingRequests.length !== 0)
    {
      return false;
    }
  }
}

我们最近测试的应用程序切换到使用Angular 2.上面的代码片段不等待Angular 2完成.有什么建议？

我是AngularJS 2.0的新手,基本上我是在构造函数中通过Promise加载数据,但模板是在解析promise之前呈现的.

知道怎么做到这一点？

谢谢,M.

第一:是的,我事先用谷歌搜索过,而且出现的解决方案对我不起作用.

上下文

我有一个调用服务的Angular 2组件,并且在收到响应后需要执行一些数据操作:

ngOnInit () {
  myService.getData()
    .then((data) => {
      this.myData = /* manipulate data */ ;
    })
    .catch(console.error);
}

在其模板中,该数据将传递给子组件:

<child-component [myData]="myData"></child-component>

这导致了孩子myData未定义的错误.上面发布的谷歌搜索结果谈到了使用,Resolver但这对我不起作用.

当我创建一个新的解析器时:

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { MyService } from './my.service';

@Injectable()
export class MyResolver implements Resolve<any> {
    constructor(private myService: MyService) {}

    resolve (route: ActivatedRouteSnapshot): Observable<any> {
        return Observable.from(this.myService.getData());
    }
}

app.routing.ts

const appRoutes: …

只要承诺尚未解决,我想阻止访问路由.另外,我想将该promise的返回值传递给路由组件.

SO上的几个帖子建议使用这个OnActivate接口.该文件说:"如果routerOnActivate返回一个承诺,路线变化将等到承诺平息实例化和启动子组件 ".听起来很完美,只有路线仍然会立即激活...(是因为它是Route2 的子组件会等待承诺,而不是Route2组件本身??)

请参阅https://plnkr.co/edit/ipKrOgfRj0vKk8ZejH5v?p=preview.Route2组件实现了OnActivate接口,但是当您单击Route2链接时,会立即激活Route2组件.但是,URL /route2仅在承诺解决后才会更新.(在一个单独的窗口中启动Plunker以查看我的意思.)现在我不太关心URL,在解决promise之前,Route2组件根本不应该实例化.

我的另一个策略是使用@CanActivate装饰器.它更适合我的目的,"路由器调用它来确定组件是否可以实例化为导航的一部分".

这里的问题是如何将数据从@CanActivate装饰器中的promise传递给组件？

我看到人们将他们的数据写入next装饰器参数的属性,并next在routerOnActivate方法的参数中检索它.

例如在next.params(这里):

@CanActivate((next) => {
  return messageService.getMessage()
      .then((message) => {
         next.params.message = message;
         return true;
      });
})
export class MyComponent implements OnActivate {
  routerOnActivate(next) {
    this.message = next.params.message;
  }
}

或者next.routeData.data(在这里).

但是文档 …