标签: angular2-routing

我试图从路由器更改页面标题,这可以做到吗？

import {RouteConfig} from 'angular2/router';
@RouteConfig([
  {path: '/home', component: HomeCmp, name: 'HomeCmp' }
])
class MyApp {}

我想创建一个外部重定向,但为了使所有路由保持一致,我认为在路由器状态配置下做所有事情(包括外部重定向)会很好.

所以:

const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'first', component: FirstComponent},
  {path: 'second', component: SecondComponent},
  {path: 'external-link', /*would like to have redirect here*/}      
];

UPD:我不想像@koningdavid建议的那样使用空组件.对我来说这个解决方案看起来很奇怪.对于没有虚拟组件的情况,这应该是非常容易实现的.

关于Route Guards的angular2文档让我不清楚什么时候使用CanActivate防护装置和CanActivateChild防护装置以及无装配路线.

TL; DR: 什么是在具有点canActivateChild时,我可以用一个无部件与航线canActivate达到同样的效果呢？

长版:

我们可以在路由层次结构的每个级别都有多个防护.路由器首先检查CanDeactivate和CanActivateChild防护,从最深的子路由到顶部.然后它从上到下检查CanActivate警卫到最深的子路线.

我得到的CanActivateChild是自下而上CanActivate检查并自上而下检查.对我来说没有意义的是文档中给出的以下示例:

@NgModule({    
  imports: [
    RouterModule.forChild([
      {
        path: 'admin',
        component: AdminComponent,
        canActivate: [AuthGuard],
        children: [
          {
            path: '',
            canActivateChild: [AuthGuard],
            children: [
              { path: 'crises', component: ManageCrisesComponent },
              { path: 'heroes', component: ManageHeroesComponent },
              { path: '', component: AdminDashboardComponent }
            ]
          }
        ]
      }
    ])
  ],
  exports: [
    RouterModule
  ]
})
export class AdminRoutingModule {}

所以admin路径有一个无组件路径:

查看AdminComponent下的子路由,我们有一个路径,其中包含路径和子属性,但它没有使用组件.我们的配置没有出错,因为我们可以使用无组件路由.

为什么在这种情况下代码插入 …

Angular2应用程序加载缓慢,如何提高负载性能？

我使用Angular2,打字稿和html5.

目前我的应用需要4秒才能加载.我使用Firebase托管并使用cloudflare.

我正在做的事情/信息:

• 我压缩了图像.
• 我缩小了CSS
• 我缩小了js.
• 我在脚本上使用async.
• 我的脚本在我的.
• 脚本大约700kb
• 我使用谷歌速度测试获得65%
• 我使用了libs的缩小版本,例如bootstrap等.
• 使用systemjs.
• 这是使用的种子应用程序:https://github.com/mgechev/angular-seed

流:

当应用程序加载时,它会显示一个蓝屏(这是bootstrap css),然后4秒后应用程序加载并且工作得非常快.但需要4秒钟才能加载.似乎systemjs缩小的app.js文件正在减慢整个应用程序,并且没有足够快地显示视图.

这是我的网站速度测试: https ://www.webpagetest.org/result/161206_F5_N87/

这是我的网站:

https://thepoolcover.co.uk/

如果您需要有关我的应用程序的更多信息以及我可以执行的任何其他操作,请告诉我.

如何添加查询参数routerLink？

@RouteConfig {
   {path: '/search',   name: 'Search', component: SearchCmp}
}  

让我们说要前往/search?q=asdf,

<a [routerLink]= " [ '/Search' , {q= 'asdf'}] ">Link 1</a>

这解决了/search.

有没有办法添加查询参数而不使用:

this.router.navigate( ['Search', { q: 'asdf'}]);

要么

<a href="/search?a=asdf"> Link 2 </a>

？

我们假设我得到了这个路由器配置

export const EmployeeRoutes = [
   { path: 'sales', component: SalesComponent },
   { path: 'contacts', component: ContactsComponent }
];

并已导航SalesComponent到此URL

/department/7/employees/45/sales

现在我想去contacts,但因为我没有绝对路线的所有参数(例如7上面例子中的部门ID ),我宁愿使用相对链接到达那里,例如

[routerLink]="['../contacts']"

要么

this.router.navigate('../contacts')

不幸的是,这不起作用.可能有一个明显的解决方案,但我没有看到它.有人可以帮帮忙吗？

如何通过TypeScript在Angular上重新加载当前页面？

我不想更改URL参数,只是为了重新加载.

如何从相对导航/questions/123/step1到/questions/123/step2使用分量内Router没有字符串连接和指定/questions/123/？

我在下面添加了自己的答案.请随时提出更好的答案.;-)我想有更好的方法.

在我的Angular 2应用程序中,我试图禁用routerLink而没有任何成功.我试图处理事件上的click事件click(使用event.preventDefault()和event.stopPropagation()),但它不起作用.

如何禁用routerLink？

使用ui-router-ng2而不是新的Angular2路由器有什么好处和缺点？在过去,我使用ui-router和Angular 1.x而不是使用ngRoute,因为我需要更好地支持嵌套状态/路由.

那么现在,Angular2呢？我想听听你的意见,以便我能评估这两个机会.

此外,搜索和搜索谷歌我发现ngrx /路由器,我不知道.你能告诉我Angular2 的内置路由器,Angular2和ngrx路由器的新ui路由器之间有什么区别吗？