标签: angular2-routing

我正在用简单的JS构建一个有角度的2应用程序.我的问题是,当我从一个页面更改为另一个页面时,它会闪烁一个白页,直到呈现新视图.仅在我第一次访问它们时才会发生这种情况.如果我第二次进入相同路线,则页面加载时没有白页.我捕获屏幕以更好地解释我的问题:https://drive.google.com/file/d/0B5pOsXT-4rdTbmtuVnlUdXRMdE0/view？usp =sharing

这是我的主要观点:

<router-outlet></router-outlet>

<nav id="menu">
    <a [routerLink]="['Page1']">Page 1</a>
    <a [routerLink]="['Page2']">Page 2</a>
    <a [routerLink]="['Page3']">Page 3</a>
    <a [routerLink]="['Page4']">Page 4</a>
    <a [routerLink]="['Page5']">Page 5</a>
</nav>

RouteConfig的定义如下:

AppComponent = ng.router
    .RouteConfig([
        {path: '/page1', name:"Page1", component: Page1Component, useAsDefault: true },
        {path: '/page2', name:"Page2", component: Page2Component},
        ...
    ])
    (AppComponent);

我的所有组件都有.html文件和.css文件,如下所示:

Page1Component = ng.core
    .Component({
        selector: 'rl-page1',
        templateUrl: 'app/components/page1/view.html',
        styleUrls: ['app/components/page1/style.css'],
        directives: [ng.router.ROUTER_DIRECTIVES]
    })
    .Class({
        constructor: [ng.router.Router, function(router) {
            this.router = router;


        }]
    });

从我访问它们后看起来像角度缓存页面,在第二次访问时将立即显示(没有白色闪烁).我搜索我如何能够解除这个问题,但我找不到任何答案或方法.

如果您需要更多代码,请与我们联系.

(我不在实际应用中使用Page1,Page2,仅针对此问题,我更改为更清晰例如)

谢谢.

编辑:2016-03-18

我尝试使用DynamicComponentLoader加载隐藏div中的所有组件.代码在AppComponent中如下所示:

ngOnInit: function(){
    this.dcl.loadIntoLocation(Page1Component, this.elementRef, …

我正在使用Angular2编写实时更新图.我的图表正在通过httpobservable和一个setInterval命令进行更新.

我注意到的一个奇怪的事情是,当我通过角度路由到我的应用程序上的不同视图时,setInterval前一个组件上的命令不会停止,从而导致服务器不必要的负载.

setInterval在Angular2中,在路由更改上停止http请求的正确方法是什么？

任何帮助将不胜感激.

我正在使用具有子路由的新RC1路由器.这是一个非常简单的路由配置示例.

AppComponent的配置

@Routes([
  {path: '/area1/...', component: Area1Component},
  {path: '/page2', component: Page2Component},
  {path: '/page3', component: Page3Component}
])

Area1Component的配置

@Routes([
  {path: '/page11', component: Page11Component},
  {path: '/page12', component: Page12Component},
  {path: '/page13', component: Page13Component}
])

我可以使用如下命令导航各个页面

this.router.navigate(['page2'])  // from AppComponent

要么

this.router.navigate(['../page12'], this.segment) // from pages of Area1 - this.segment is the current segment

我发现,如果我单击浏览器的后退按钮,它会将我带回"一页",但之后它会停留在那里(即我不会导航回导航的整个历史记录).此外,永远不会激活前进按钮.使用旧路由器,我可以来回,没有明显的问题.这适用于Chrome,FF和Safari.

我错过了什么吗？

提前致谢

我正在使用RC1和新路由器(不是已弃用的路由器).

我已经阅读了大部分博客和文档,但我真的找不到一种惯用的方法,特别是没有使用"新"路由器.到目前为止,我的应用程序"完美"工作,只是缺少一些东西:

1. 我应该如何Authorization在每个 http请求上添加令牌到标头？(就像Angular 1.x中的拦截器一样)
2. 我如何拦截任何40x响应,如果需要(意味着路由受到保护)导航到另一个URL？
3. 如何设置路由(或组件),以便在用户未登录时应用程序将导航到登录URL？
4. 额外奖励:在主要组件的contstructor中加载基本用户数据是不是惯用的？

我不需要一个完整的演示或类似的东西,只需要几个要点,我应该去.

目前正在尝试使用ng2的内置animations组件在我的Angular2站点中实现一些动画.到目前为止,我一直在研究Developer Guide - Animations文档中提供的Angular 2 .虽然我遇到了一些问题,但我希望SO社区能够提供帮助.我的第一个问题/问题似乎是动画(我能说的)不能运行页面加载.如果我切换到视图然后回到带有动画的视图,它似乎运行得很好.这是我目前用于相关动画的代码(如果需要,我可以提供整个组件):

animations: [
  trigger('kissState', [
    state('in', style({opacity: 1})),
    transition('void => *', [
      style({opacity: 0}),
      animate('250ms ease-in-out')
    ]),
    transition('* => void', [
      animate('250ms ease-in-out', style({opacity: 0}))
    ])
  ])
]

我的印象是void => *将我的DOM元素设置为,opacity:0并且一旦它进入in视图就会opacity:1.我似乎遇到的另一个问题是我的导航似乎不适用于移动设备.我实际上还没有把它们移到我的服务器上,但是在本地开发并通过节点查看我的移动设备localtunnel似乎没有任何动画.这可能是因为奇怪的方式localtunnel运行所以我不太关心它,直到我能在真正的服务器上真正测试它.这是另一个动画,特别是当我注意到它不能在我的移动设备上运行时:

animations: [
  trigger('offScreenMenu', [
    state('inactive', style({
      opacity: 0,
      zIndex: -10
    })),
    state('active',   style({
      backgroundColor: 'rgba(255, 255, 255, 0.8)',
      zIndex: 10
      })),
    transition('inactive => active', animate('250ms ease-in')),
    transition('active => …

在ngOnDestroy方法中,我取消订阅我订阅的一个observable,否则代码被多次执行...

ngOnInit()
{
    this.sub = this.route.params.subscribe(params => 
    {
        this.projectId = +params['id'];
        this.projectStore.project = this.projectId;

        // load data when the route changes
        this._tasksService.gettasks(this.projectId).subscribe(years => { this.tasks = years.map(y => new task(y)) }); // no need to clean up the subscription

    });
    // load data when the component is initialized
    this._tasksService.gettasks(this.projectId).subscribe(years => { this.tasks = years.map(y => new task(y)) }); // no need to clean up the subscription

}

ngOnDestroy()
{
    this.sub.unsubscribe();
}

现在我想把它放在路由器解析类中,但是没有ngOnDestroy - 当然 - 只是一个我再次订阅的NavigationEnd事件.

这意味着我订阅了一个NavigationStart事件(当我离开路线时发生)以取消订阅另一个订阅,这是路由参数更改订阅HAHAHA ...

我想这不是可行的方法,但谷歌什么也没提供.

任何人都知道如何处理这种情况？或者应该路由params更改订阅真的只属于一个组件？ …

我正在尝试"插入"包含路由配置(从中导入RouterModule.forChild())的子ngModule(功能模块)到父ngModule中.

使用延迟加载时,使用loadChildren父模块路由配置中的密钥指定"插入"子模块的位置.

例如:

export const parentModuleRouteConfig = [{
    path: 'myfeaturemodule',
    loadChildren: '/app/child.module'
}];

实际上,我不想使用延迟加载.

如何告诉路由器"插入"(或使用)给定路径的子模块中指定的路由配置？

我正在使用JWT对用户进行身份验证.我的angular2应用程序中的部分路径受CanActivate Guard保护,如果用户未登录,它将重定向到登录页面.现在我正在实现注销按钮,并希望重定向到登录页面.我想仅在非登录用户(例如帐户页面)看不到当前路由时才重定向.如果用户在例如主页中,我不想重定向到登录页面.

如果我能够检查当前路线是否有防守并且如果存在则触发该防护,那将是完美的.有可能这样做吗？

守护:

public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.loginService.getCurrentUserName()) {
        // logged in so return true
        return true;
    }
    // not logged in so redirect to login page with the return url
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
    return false;
}

我有两个组成部分.客户和货件组件.当用户从Shipment组件到Customer组件时.我想将Customer组件直接发送到Shipment组件.

我用这种方法. this._location.back();从位置角度/共同.

这种方法总是直接到后面的页面.但是,当我从货运组件来时,我想要直接.

<a href="/my-path/{{my_param}}"></a>我不想在模板中使用，而是愿意使用带有参数的函数将我重定向到页面。

因此，这就是我在.ts文件中构建函数的方式：

redirectToChat(my_param){
    this.router.navigate(['./my-path/' + my_param ]);
}

以及我在模板中的调用方式：

 <div (click)="redirectToChat(my_param)">
    ...
</div>

它更改URL，但不呈现组件。我将此导入到组件中：

import { Router, ActivatedRoute, ParamMap } from '@angular/router';

我在构造函数中使用了它： private router: Router

您可以帮助我正确渲染组件吗？我还能如何使用功能将用户重定向到页面？