我使用解析器将数据加载到组件中,但在数据未从服务器返回之前,组件不会加载.我想知道在服务器响应之前是否有一种方法来呈现负载指示器.
角社区!
我目前正在将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应用程序,目前我有一个带有导航栏,工具栏和路由器插座的主要内容的主页组件.我想为登录机制添加一个额外页面,因此如果用户未经过身份验证,则登录页面将显示在整个屏幕中,登录到用户后将导航到具有上述结构的组件.
我该如何管理这个结构?我需要两个路由器插座吗?第一个用于登录和主页之间的导航,另一个用于主页中的主要内容?还有比两个路由器插座更简单的其他常见结构吗?
正如您最近可能已经提到的那样,如果您还使用参数,则@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不能一起使用
我试图用不同的参数路由到当前页面,但没有用.我有一个触发的组合框:
this.router.navigate(['page', selectedId]);
Run Code Online (Sandbox Code Playgroud)
网址正在发生变化,但就是这样.
如何使用不同的参数路由到同一页面?
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路由器将我重定向到默认路由(或任何其他路由)?
我需要<base>在HTML中或APP_BASE_HREF在Angular 2的引导期间设置不抛出异常.如果我设置其中任何一个,那么Electron考虑文件系统,在browser_adapter.ts尝试匹配路由时抛出异常:
EXCEPTION:错误:未捕获(在承诺中):无法匹配任何路由.当前细分:'C:'.可用路线:['/ dashboard','/ accounts'].
使用angular2,我想在我的组件中以编程方式打开辅助路径.
此代码打开带有"list"路径的路径,并在正确的命名路由器插座中打开路由,但我不确定如何将参数传递给路由:
this.router.navigate(['./', { outlets: { 'list-outlet': 'list' } }]);
Run Code Online (Sandbox Code Playgroud)