标签: 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中加载基本用户数据是不是惯用的？

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

这是一个可以玩的玩家:

https://plnkr.co/edit/qTjftING3Hk2fwN36bQa?p=preview

一切都运行良好,除非您手动更改网址栏中的id参数,因为项目下拉列表不会将新projectId显示为当前项目.当用户将网址保存为收藏链接并将其复制/粘贴到网址栏时,会发生这种情况!我会说一个常见的情况!

为了解决这个问题,我可以收听route.params中的更改TestsListComponent并添加一个检查,sharedService/EventEmitter其中更改的ID存在于该下拉列表中.TestsListComponent中的bool返回值existsProjectId决定我应该重定向到/projects页面,因为id不存在.

但老实说,TestsListComponent至少从用户体验的角度来看,重定向是太迟了,因为route projects/:id/tests它已经被激活了.

你会如何解决这种不端行为？

PS

• 也许有一种全局参数更改我可以听,并检查ProjectsListComponent中的路径及其ID,这将有所帮助!

• 如果有人知道如何在窗口模式下编辑plunkr的url栏来测试这种不一致性,请告诉我你是如何使readonly url bar可编辑的...即使将url复制到新的选项卡也不行,因为我得到了一个plunkr找不到错误... => 答案

  1. 加载plunkr并激活窗口模式
  2. 在窗口模式下,将URL复制/粘贴到新选项卡中
  3. 当这是粘贴的URL:https://run.plnkr.co/LhwcQjzWHsRUda8H/projects/1/schoolclasses
  4. 设为网址:https: //run.plnkr.co/LhwcQjzWHsRUda8H/#/projects/1/schoolclasses
  5. 并改变参数:https: //run.plnkr.co/LhwcQjzWHsRUda8H/#/projects/2/schoolclasses
  6. 如果你不添加哈希,那么你得到一个未找到的404.

我正在尝试"插入"包含路由配置(从中导入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;
}

我正在进行登录检查.一旦成功,我想将用户重定向到同一应用程序中的另一个页面.我有以下代码来做到这一点.

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { DataService } from '../services/data.service';
import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
   providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}],
  styleUrls: ['./login.component.css'],

})
export class LoginComponent   {

static location:Location;

  constructor(private formBuilder: FormBuilder,
              private dataService: DataService,location: Location) {
                LoginComponent.location = location;

      this.loginForm = this.formBuilder.group({
      username: this.username,
      password: this.password
    });
  }

  loginForm : FormGroup;
  username = new FormControl('', Validators.required);
  password = new FormControl('', …

我有一个页面,我有一张桌子.有一列名为"Actions".

一旦用户单击任何行中的action-column,操作菜单将显示Edit和Delete.一旦用户点击编辑,我就会重定向到另一个html页面.

一切都很好.但重定向到另一个页面后,菜单不会消失.如果我返回并再次单击操作列,则会出现带有编辑和删除的新菜单.

<p-dataTable #dataTable>
    <p-column field="" header="{{l('Actions')}}" [sortable]="false" [style]="{'width':'25px'}">
        <ng-template let-record="rowData" pTemplate="body">
            <div class="btn-group dropdown" normalizePosition>
                <button class="dropdown-toggle btn btn-xs btn-primary blue"
                        data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false">
                    <i class="fa fa-cog"></i>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a (click)="onEditClick(record, $event)">{{ l('Edit') }}</a>
                    </li>
                    <li>
                        <a (click)="onDeleteClick(record, $event)">{{ l('Delete') }}</a>
                    </li>
                </ul>
            </div>
        </ng-template>
    </p-column>
</p-dataTable>

onEditClick(selectedValue: any): void {
   this.router.navigate(['/app/xyz/pqr', selectedClassification.id]);
}

<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

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