标签: angular2-routing

Angular 2旋转变压器带有加载指示器

我使用解析器将数据加载到组件中,但在数据未从服务器返回之前,组件不会加载.我想知道在服务器响应之前是否有一种方法来呈现负载指示器.

angular2-routing angular

21
推荐指数
2
解决办法
6766
查看次数

Angular2路由:持久路由选项卡和子路由

角社区!

我目前正在将AngularJS应用程序重写为Angular 2.我想解决可能被描述为的问题:路由选项卡+子路由.

所以,基本上Angular 2中的Router会破坏非活动组件(我的标签!).问题是我不想要这种行为.原因是我有一些组件,如图表和数据网格,并希望快速切换它们,我不想重新创建它们.

我找到了一些解决方法来保留我的标签,同时有路由但使用这种方法我不知道如何实现子路由.我还想要一个独立于深度的解决方案(意思是:更深层次地工作)因为我有更多需要持久化的子标签.

解决方法是:我已经将一些空组件放到路由并实例化标签,我自己用[hidden]属性隐藏它们:

app.ts:

@Component({ /*...*/ })
@RouteConfig([
    {path: '/**', redirectTo: ['Dashboard']},

    {path: '/dashboard', name: 'Dashboard', component: EmptyRoute},
    {path: '/products/...', name: 'Products', component: EmptyRoute},
    {path: '/sales', name: 'Sales', component: EmptyRoute},
    {path: '/reports', name: 'Reports', component: EmptyRoute},
])
export class App {
    constructor(private router: Router) {
    }

    public isRouteActive(route) {
        return this.router.isRouteActive(this.router.generate(route))
    }
}
Run Code Online (Sandbox Code Playgroud)

app.html:

<dashboard [hidden]="!isRouteActive(['/Dashboard'])"></dashboard>
<products-management [hidden]="!isRouteActive(['/Products'])"></products-management>
<sales [hidden]="!isRouteActive(['/Sales'])"></sales>
<reports [hidden]="!isRouteActive(['/Reports'])"></reports>
Run Code Online (Sandbox Code Playgroud)

angular2-routing angular

20
推荐指数
1
解决办法
4830
查看次数

Angular2 - 具有登录结构的路由器插座

我正在构建angular2应用程序,目前我有一个带有导航栏,工具栏和路由器插座的主要内容的主页组件.我想为登录机制添加一个额外页面,因此如果用户未经过身份验证,则登录页面将显示在整个屏幕中,登录到用户后将导航到具有上述结构的组件.

我该如何管理这个结构?我需要两个路由器插座吗?第一个用于登录和主页之间的导航,另一个用于主页中的主要内容?还有比两个路由器插座更简单的其他常见结构吗?

angular2-routing angular

20
推荐指数
1
解决办法
9277
查看次数

使用redirectTo如果你也使用了children参数,这可能吗?

正如您最近可能已经提到的那样,如果您还使用参数,则@angular/router 3.0.0-rc.1不允许使用user 参数.redirectTochildren

但在某些情况下,这肯定是我需要的东西.例如,我想要的是将所有对父路由器的请求重定向到第一个子节点.

这是我的路由器:

{
    path: 'project/:id',
    component: ProjectComponent,
    children: [
      {
        path: 'properties',
        component: ProjectPropertiesComponent
      },
      {
        path: 'stats',
        component: ProjectStatsComponent
      }
    ]
  }
Run Code Online (Sandbox Code Playgroud)

在我的情况下,我希望每个进入project/:id路线的人都被重定向到第一个孩子(properties).

这有可能吗?

如果我这样做:

{
    path: 'project/:id',
    component: ProjectComponent,
    redirectTo: 'properties',
    children: [
      {
        path: 'properties',
        component: ProjectPropertiesComponent,
      },
      {
        path: 'stats',
        component: ProjectStatsComponent
      }
    ]
  }
Run Code Online (Sandbox Code Playgroud)

我当然得到这个错误:

EXCEPTION:错误:路由'project /:id'的配置无效:redirectTo和children不能一起使用

routing typescript angular2-routing angular

20
推荐指数
1
解决办法
8972
查看次数

Angular2路由器 - 导航到具有不同参数的当前页面

我试图用不同的参数路由到当前页面,但没有用.我有一个触发的组合框:

this.router.navigate(['page', selectedId]);
Run Code Online (Sandbox Code Playgroud)

网址正在发生变化,但就是这样.

如何使用不同的参数路由到同一页面?

angular2-routing angular

20
推荐指数
2
解决办法
2万
查看次数

如何从父路由的组件访问激活的子路由数据?

const appRoutes: Routes = [
  { path: 'parent', component: parentComp, data: { foo: 'parent data' }, children: [
    { path: 'child1', component: childComp1, data: { bar: 'child data 1' },
    { path: 'child2', component: childComp2, data: { bar: 'child data 2' }
  ]}
];
Run Code Online (Sandbox Code Playgroud)

如果我导航到/parent/child2然后查看ActivatedRoutefrom parentComp,data.foo则定义,但data.bar不是.我可以访问所有孩子的数组,但我不知道哪一个被激活.

如何从父路由的组件访问激活的子路由数据?

angular2-routing angular

20
推荐指数
3
解决办法
2万
查看次数

Angular2 Routing - 在路由更改时保持组件的状态

我有一个应用程序,路径后面的视图,我需要能够从路由更改时的点继续,但在返回后,组件处于其初始状态.

有没有办法如何保持组件的状态?

angular2-routing angular

19
推荐指数
1
解决办法
2万
查看次数

Angular2后备路线

如果我转到不存在的路由,如何配置Angular2路由器将我重定向到默认路由(或任何其他路由)?

angular2-routing angular

19
推荐指数
3
解决办法
1万
查看次数

使用Electron时,如何配置Angular 2的基本href?

我需要<base>在HTML中或APP_BASE_HREF在Angular 2的引导期间设置不抛出异常.如果我设置其中任何一个,那么Electron考虑文件系统,在browser_adapter.ts尝试匹配路由时抛出异常:

EXCEPTION:错误:未捕获(在承诺中):无法匹配任何路由.当前细分:'C:'.可用路线:['/ dashboard','/ accounts'].

我尝试使用这个博客文章中HashLocationStrategy提到,但Angular仍抱怨没有设置基本href.

typescript electron angular2-routing angular

19
推荐指数
2
解决办法
6029
查看次数

如何以angular2 +编程方式将参数传递给辅助路径?

使用angular2,我想在我的组件中以编程方式打开辅助路径.

此代码打开带有"list"路径的路径,并在正确的命名路由器插座中打开路由,但我不确定如何将参数传递给路由:

this.router.navigate(['./', { outlets: { 'list-outlet': 'list' } }]);
Run Code Online (Sandbox Code Playgroud)

angular2-routing angular

19
推荐指数
2
解决办法
4万
查看次数

标签 统计

angular ×10

angular2-routing ×10

typescript ×2

electron ×1

routing ×1