标签: angular2-routing

虽然使用ng2-nvd3结合角度2路由功能,我注意到控制台充满了以下错误:

d3.min.js:1 Error: <g> attribute transform: Expected number, "translate(NaN,5)"

我设法将问题指向一个用例:

• 将路径出口更改为指向具有ng2-nvd3图表的路线
• 将其更改回指向没有ng2-nvd3图表的路线
• 更改窗口的大小(或开发人员控制台的大小)
• 在控制台中查看错误

这个可以很容易地用这个plunker重现:

• 打开开发者控制台
• 单击"图表"链接
• 单击"无图表"链接
• 更改开发人员控制台(或浏览器窗口的大小 - 相同的效果) - 确保释放鼠标按钮而不仅仅是更改大小.
• 控制台中出现错误

怎么能避免这个错误？

从Beta-17迁移到RC4后,我遇到的问题很少.我收到以下编译错误

引导错误

/// < reference path="../node_modules/angular2-in-memory-web-api/typings/browser.d.ts" >
import {bootstrap} from '@angular/platform-browser';
Error: Module "../platform-browser/index" as no exported member bootstrap

路由器错误

import {ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES, RouteParams, ROUTER_BINDINGS} from '@angular/router';
Error: Cannot find module '@angular/router'

我尝试使用路由器也弃用了,仍然发现模块未找到错误

import {ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES, RouteParams, ROUTER_BINDINGS} from '@angular/router-deprecated';
Error: Cannot find module '@angular/router-deprecated'

如果不推荐使用现有路由器,那么实现路由的新方法是什么？

我在以下文档中验证了URL,但没有注意到很多区别.

任何人都可以对此有所了解吗？

根据评论更新:新的错误集

我现在可以导入bootstrap和路由器,但是我收到了一些其他错误

错误#1.无法导入RouteConfig

import { ROUTER_DIRECTIVES, RouterOutlet, RouteConfig } from '@angular/router';
Error: Module "../angular/router/index has no exported member RouteConfig"

为了使路由器不再使用,即我现有的路由实现,我需要导入RouteConfig.我不确定从哪里可以导入RouteConfig

2. 除此之外,我得到了近210个编译错误,如下所示.当我搜索以下错误时,建议添加以下行

   /// ../node_modules/angular2/typings/browser.d.ts"/> …

我被封锁了,
在Angular 2中,我需要阻止任何用户点击事件,如果页面中的表格是脏的,甚至浏览器刷新

你能帮我一点想法吗？

我正在使用AngularFire2.这就是我接近我的AuthGuard服务的方式:

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    this.af.auth.subscribe((auth) =>  {
      if(auth == null) {
        this.router.navigate(['/login']);
        this.allowed = false;
      } else {
        this.allowed = true;
      }
    })
    return this.allowed;
  }

上面的代码有效,除非我直接访问受保护的页面(我在浏览器中输入URL),它在订阅解析为true后不会加载相应的组件.

在角度1中,保护路线是确保在路线加载之前先解决某些事情.

它出现在角度2中,路由加载(无论是真还是假,并且不等待来自线路的任何响应),因此当订阅值返回为真时,我必须转到另一条路线,然后返回在它工作之前.

什么是保护我的路线在Angular 2中响应的正确方法？

我已经在nativescript中实现了角度路由导航,我遇到了糟糕的性能,我似乎无法找到它的瓶颈.

这是当前的设置

???????????????????????????????????????????????????????????????????????
? Component        ? Current version ? Latest version ? Information   ?
? nativescript     ? 2.3.0           ? 2.3.0          ? Up to date    ?
? tns-core-modules ? 2.3.0           ? 2.3.0          ? Up to date    ?
? tns-android      ? 2.3.0           ? 2.3.0          ? Up to date    ?
? tns-ios          ?                 ? 2.3.0          ? Not installed ?
???????????????????????????????????????????????????????????????????????

可以在这里看到存储库:https: //github.com/felipemullen/teras

您可以看到它是一个基于示例存储库的非常简单的结构.但是,从一个页面到另一个页面的转换大约需要3-4秒,这非常糟糕.

以下是一些截图,展示了应用程序的简单性,几乎没有任何绑定,也没有加载任何数据.所有这一切都是一个按钮通向另一个页面:

所以问题是,为什么这些页面加载速度如此之慢？这只是因为nativescript还很年轻吗？我玩了演示应用程序,他们似乎没有这个问题.

问题 - 我可以将多个路由指向相同的延迟加载模块(以及关联的路由器吗？).我一直收到"错误:无法匹配任何路线:'Page30'".

这是我的app.routing.ts设置延迟加载:

const appRoutes: Routes = [
  { path: '', component: Page1Component },                          // <-- default page
  { path: 'Page1', component: Page1Component },
  { path: 'Page2', component: Page2Component },
  { path: 'Page3', component: Page3Component },
  { path: 'Page30', loadChildren: './+lazy/lazy.module#LazyModule' },
  { path: 'Page31', loadChildren: './+lazy/lazy.module#LazyModule' },

  // { path: '**', component: PageNotFoundComponent }           // <-- route not found
];

export const appRoutingProviders: any[] = [

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

这是+ lazy/lazy.routing.ts:

import { Page30Component …

我想了解Angular2中的路线. 这是它的plunker链接.我的问题是它无法找到\heroes或\hero\:id创建的路由heroes-routing-module.每次加载主页(\ heroes)时,它都会显示page not found来自页面未找到页面的文本{ path: '**', PageNotFoundComponent}.以下是相关文件的摘录(不是包含导入和导出行的完整代码).

英雄路由模块

const heroesRoutes: Routes = [
  { path: 'heroes',  component: HeroesComponent },
  { path: 'hero/:id', component: HeroDetailComponent }
];

@NgModule({
  imports: [
    RouterModule.forChild(heroesRoutes)
  ],
  exports: [
    RouterModule
  ]
})

英雄模块

@NgModule({
  imports: [
    HeroRoutingModule,
    SharedModule
  ],
  declarations: [
    HeroesComponent,
    HeroDetailComponent,
    HeroSearchComponent
  ],
  providers: [
    HeroService
  ]
})

应用模块

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService),
    AppRoutingModule,
    HeroesModule,
    SharedModule
  ],
  declarations: [
    AppComponent, …

我有一个愿望清单选项的页面,现在如果用户没有登录并点击愿望清单按钮然后用户被重定向登录页面,但在用户登录成功后我想让用户进入以前的路由状态,用户点击了愿望清单按钮？

我尝试使用像RoutesRecognized这样的路由器事件,但是如果我第二次访问登录页面时这不会被激活.任何建议,请不要帮助.

我甚至使用了路由器事件的pairwise()方法,但这也是第二次没有第一​​次触发,也就是说如果我回到第1页并重新导航到page2,这个方法就会激活.它只是在第1页 - >第2页的第一次访问时没有被激发

我正在将我们的SPA代码库从角度2.0.0升级到2.4.10(Angular router 3.4.10).但是现在,最奇怪的事情正在发生:一些路由工作正常,但有些路由没有返回任何内容(如空白组件),并且在我的任何调试前端都记录了绝对没有错误

这是我们实现的提炼版本:主要的"子"路由是延迟加载的,但是下面的子路由被加载的模块急切加载

例:

www.hostname.com/clients <- Lazy load
www.hostname.com/clients/details <- Eager loaded by the "Clients" module

我的主应用程序路径上有以下代码(src/app/app.routing.ts):

import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
  { path: 'clients', loadChildren: () => System.import('../clients/clients.module').then(m => m['ClientsModule']) },
  ...moreRoutes
];

export const appRouting = RouterModule.forRoot(appRoutes);

然后在(src/clients/clients.routing.ts)中:

import { Routes, RouterModule } from '@angular/router';
import { Clients } from './'; // I have a index.ts file that exports the component plus some more stuff, so loading from this relative …

我的路线定义如下：

const appRoutes: Routes = [
 {
  path: 'teacher',
  component: 'TeacherComponent'
 },
{
  path: 'student',
  loadChildren: './components/student/student.module#StudentModule',
  canLoad: [AuthGuard]
},
{ path: '**',   redirectTo: '/' }
];

我想根据登录用户角色来路由默认路由。如果是学生，我想默认设置我的路径：“ **”，将其重定向到“ / student”。同样，对于教师角色，我希望它默认为“ / teacher”。如何通过默认路由到基于角色的不同URL来实现基于角色的导航？