在Angular2路由中使用解析

发布时间：2020-12-17 08:26:37 所属栏目：安全来源：网络整理

导读：在Angular 1中，我的配置如下所示： $routeProvider .when("/news",{ templateUrl: "newsView.html",controller: "newsController",resolve: { message: function(messageService){ return messageService.getMessage(); } }}) 如何在Angular2中使用解决方案

在Angular 1中，我的配置如下所示：

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

如何在Angular2中使用解决方案？

谢谢

正如alexpods已经提到的，似乎没有一个“决心”。这个想法似乎是您使用路由器提供的生命周期挂钩。这些是：

> canReuse
> canDeactivate
> onActivate
> onReuse
> onDeactivate

然后有@CanActivate。这是一个特殊的钩子，因为在组件被实例化之前被调用。它的参数是(下一个，前一个)，它们是您要路由的组件和您来自的组件(如果没有历史记录，则为null)。

import {Component} from 'angular2/angular2';
import {ROUTER_DIRECTIVES,CanActivate,OnActivate} from 'angular2/router';

@Component({
    selector: 'news',templateUrl: 'newsView.html',directives: [ROUTER_DIRECTIVES]
})

@CanActivate((next) => {
    return messageService.getMessage()
        .then((message) => {
            next.params.message = message;
            return true; //truthy lets route continue,false stops routing
        });
})

export class Accounts implements OnActivate {

    accounts:Object;

    onActivate(next) {
        this.message = next.params.message;
    }
}

我还没有想到的是如何将承诺的结果纳入你的onActivate，而不是将它存储在你的“下一个”组件上。这是因为onActivate也只是用下一个和前一个调用，而不是承诺的结果。我对这个解决方案并不满意，但这是我能想到的最好的。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!