标签: angular2-routing

使用Angular 2 beta.0

我有一个像这样的组件结构

App (Has RouteConfig)
 -> List 
 | -> ListItem (Want to use RouterLink from here)

这会导致错误: Component "List" has no route config.

所以我在这个List组件上放了一个RouteConfig ......

@RouteConfig([
  {path: '/:id', name: 'Details', component: Detail}
])

但我得到一个像角度的错误 Error: Child routes are not allowed for "/list". Use "..." on the parent's route path.

我尝试在该路由配置中的/ list路径之前和之后添加这3个点...但没有成功.

路由器上的文档很轻,虽然我知道这应该是基于ui-router,我没有看到并行添加嵌套路由

在使用HashLocationStrategy时, 我可以通过手动更改浏览器地址栏中的地址来更改路由,而无需重新加载页面.即从导航mysite/#/home到mysite/#/profile

但是,如果我使用PathLocationStrategy(它是默认位置策略),当我尝试做同样的事情时,我有不需要的页面重新加载.即从导航mysite/home到mysite/profile

有可能解决这个问题吗？

我正在使用Angular 2.0.0-beta17

在angularJS中,ui-router允许我们使用状态使用相同路由的2个组件(例如Angular UI Router:具有相同URL的不同状态？).

是否有可能在angular2中实现相同的行为？如果可以,您可以链接/提供一些示例或解决方法吗？

这里的用例类似于Facebook或Twitter,其中URL保持不变,但内容会根据您是否登录而更改.

到目前为止,我能想到实现这一目标的唯一方法是在'父'模板中使用*ngIf来选择两个'子'组件之一的选择器.像这样的东西:

<home-logged-in *ngIf="authenticated()"></home-logged-in>
<home-logged-out *ngIf="!authenticated()"></home-logged-out>

有没有推荐的方法来做到这一点？

谢谢

我试图通过使用router.navigate重新加载Angular 2中的相同URL,但它无法正常工作.url:http:// localhost:3000/landing 场景:我在http:// localhost:3000/landing,现在我正在更改页面中应该重新加载页面的特定参数.

代码:

let link = ['Landing'];
this.router.navigate(link);

我试图从儿童路线导航到回家路线但没有任何反应.

即目前的路线是 /projects

既不工作this.router.navigate(['/'])也不routerLink="/"工作.

我routerConfig看起来像这样

const routes: Routes = [
 {
   path: '',
   component: HomeComponent
 },
 {
   path: '/projects',
   component: ProjectsComponent
 }
]

我该怎么做呢？

我正在寻找使用不同用户登录页面创建Angular 2应用程序,例如"user1.example-domain.com"和"user2.example-domain.com"将具有不同且无关的"主页".

我的问题:

1. 我怎么能用Angular 2做到这一点？
2. 如何在我的本地机器上测试它？是"user1.localhost:port"够吗？

我尝试过像这样使用静态路由:

 {path: 'test.localhost:4200/generic-link1', component: GenericLink1Component}

我已经看到它在滚筒中完成我知道它可以完成.

我希望能够为某些路由使用相同的路由器插座.

路由设置(简化):

export const routes: Routes = [
    {
        path: 'app', component: AppComponent,
            children: [
                path: 'category/:id', component: CategoryComponent,
                children: [
                    { path: 'post/:id', component: PostComponent }
                ]
            ]
    }
];

例如,我们有这条路径:

/app/category/1/post/1

那打破了

/app - AppComponent
|_ /catory/1 - CategoryComponent
   |_/post/1 - PostComponent

该AppComponent有<router-outlet>哪些渲染CategoryComponent,也应该呈现的PostComponent时候这条路线是有效的.

这类问题的常见答案:

移动子路由并将其添加到app-route children数组中

不,这不是正确的方法.我们仍然需要我们的路线层次结构.CategoryComponent可能知道PostComponent没有的东西- 比如Breadcrumb命名

所以我们仍然希望我们的CategoryComponent加载.(即使它的视图不是渲染)

使用<router-outlet>内部CategoryComponent

否.CategoryComponent不应该负责它自己的<router-outlet>.本PostComponent应在地方的渲染CategoryComponent,并添加CSS来放置它这样应该是非法的.

我怎样才能实现这种行为？

我需要编写自己的路由器插座吗？ …

可以在阵列中定义Angular 2路由器防护装置.例如:

<code>
 canActivate: ['CanAlwaysActivateGuard','AuthGuard']
</code>

以下是我的问题:

1. 两个警卫的执行顺序是什么.
2. 如果我想仅在CanAlwaysActivateGuard返回true时才执行AuthGuard,那么这是可能的.

我使用多个router-oulets来加载我的组件.外部路由器插座用于加载大多数基本组件,如login,home,404.我使用嵌套路由器插座来加载主页的子组件.router-outlet嵌套在home.component中.

home.component.html

<app-header></app-header>
<router-outlet name="homeRoute"></router-outlet>
<app-footer></app-footer> 

app.module.ts

const appRoutes: Routes = [
  {path: '', component: HomeComponent, children: [
    {path: '', component: DashboardComponent, outlet: 'homeRouter'},
    {path: 'user', component: UserComponent, outlet: 'homeRouter'},
    {path: 'user/:id', component: UserdetailComponent, outlet: 'homeRouter'}
  ]},
  {path: 'login', component: LoginformComponent},
  {path: '**', component: NotfoundComponent}
];

HomeComponent和LoginformComponent需要从外部路由器插座加载.Home组件包含名为'homeRouter'的内部路由器插座,我想用它来加载主页的子组件.但内部路由器的导航不起作用.我尝试使用router.navigate()方法并使用URL访问每个组件.但他们两个都没有按预期工作.

有人能告诉我这段代码有什么问题.我检查并尝试过几个关于同一问题的问题,但没有一个工作正常.

以下是我为不同组件尝试的URL

1. http://localhost:4200 dashboardComponet(这个有效)
2. http://localhost:4200/user userComponent(不起作用.路由到notFoundComponent)
3. http://localhost:4200/user/U001 userDetailComponent(doenst work.still route to notFoundComponent)

我已经部署了一个带有延迟加载的角度应用程序.该应用程序在Github.io域上托管时工作正常,但是当我使用mobaxterm在tomcat服务器上部署应用程序时出现错误.当页面重新加载或刷新时,应用程序将丢失路由状态并引发404错误.

HTTP状态404 - /查询

类型状态报告

消息/查询

description请求的资源不可用.

Apache Tomcat/7.0.72

Console-Log :: GET http://appv2.proctur.com/enquiry/addEnquiry 404(未找到)导航至http://appv2.proctur.com/enquiry/addEnquiry

如果我不刷新页面并一次性使用该应用程序就可以了,只是无法理解刷新时的问题.

PS ::这是我第一次在tomcat服务器上托管角度应用程序如果我犯了任何愚蠢的错误请告诉我.

为了更好地澄清,我添加了routing.module.ts,其中我懒惰加载模块.这被导入到app.module.ts ::

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

@NgModule({
imports: [
    RouterModule.forRoot([
        { path: '', redirectTo: '/authPage', pathMatch: 'full' },
        { path: 'authPage', loadChildren: 'app/components/auth-page/auth-page.module#AuthPageModule' },
        { path: 'course', loadChildren: 'app/components/course/course.module#CourseModule' },
        { path: 'enquiry', loadChildren: 'app/components/enquiry/enquiry.module#EnquiryModule' },
        { path: 'student', loadChildren: 'app/components/students/student.module#StudentModule' },
    ])
],
exports: [
    RouterModule
]
})
export class AppRoutingModule {
}