标签: angular2-routing
在进行硬刷新时,路由对我不起作用
我在看这个源代码:https://github.com/angular/angular.io/blob/master/public/docs/_examples/toh-5/dart/lib/app_component.dart
而且当我转到根目录时,我的应用程序似乎正在路由.
本地主机:8080 /
当我在我的应用程序中移动时路由更新,但似乎如果我在某个东西: localhost:8080/dashboard在一个basecase中,并进行硬刷新,它失败了.它会给我一个404 not found!错误.
如果我这样做它会工作:localhost:8080/#!/dashboard但这不是传递给我的应用程序的地址.
在index.html我有: <base href="/">
我的App_Component.dart文件如下:
import 'package:angular2/angular2.dart';
import 'package:angular2/router.dart';
import 'hero_component.dart';
import 'heroes_component.dart';
import 'dashboard_component.dart';
import 'hero_service.dart';
@Component(
selector: "my-app",
directives: const [ROUTER_DIRECTIVES],
providers: const [HeroService, ROUTER_PROVIDERS],
templateUrl: "app_component.html")
@RouteConfig(const [
const Route(
path: "/dashboard",
name: "Dashboard",
component: DashboardComponent,
useAsDefault: true),
const Route(
path: "/detail/:id", name: "HeroDetail", component: HeroDetailComponent),
const Route(path: "/heroes", name: "Heroes", component: HeroesComponent)
])
class AppComponent {
String title = "Tour …推荐指数
解决办法
查看次数
在单元测试期间注入路由器(rc.5,路由器3.0.0-rc.1)
我正在尝试对使用路由器的组件进行单元测试,我的代码是打字稿.在测试规范中有很多用于注入路由器的接收器,但是没有一个适用于我,有些在当前版本中不可用.我试过这个:
beforeEach(() => {
addProviders([
MyComponent,
provideRouter([]),
provide(APP_BASE_HREF, { useValue: '/' }),
provide(ActivatedRoute, { useValue: {} })
]);
});
并收到错误消息
Error: Bootstrap at least one component before injecting Router.
当我尝试完全模拟路由器时:
class MockRouter {
public navigate() {}
}
beforeEach(() => {
addProviders([
MyComponent,
provide(Router, { useClass: MockRouter })
]);
});
测试套件完全停止并显示错误消息
TypeError: Attempting to configurable attribute of unconfigurable property.
在router_testing_module.d.ts中,他们建议:
beforeEach(() => {
configureModule({
modules: [RouterTestingModule],
providers: [provideRoutes(
[{path: '', component: BlankCmp}, {path: 'simple', component: SimpleCmp}])]
});
});
但是这个功能configureModule似乎不存在(还有吗？). …
推荐指数
解决办法
查看次数
Angular2.0路由器适用于组件而非模块？
我正在尝试修改现有的角度应用程序以适应此Starter项目的结构.无论如何,所以我的app模块有一个子模块(教程).看起来像这样:
登陆根域然后使用路由器链接导航时http://localhost:3000/tutorial/chapter/0,一切正常.但是,如果我刷新页面或尝试直接转到该链接,我会收到错误消息:
Unhandled Promise rejection: Template parse errors:
'my-app' is not a known element:
1. If 'my-app' is an Angular component, then verify that it is part of this module.
2. If 'my-app' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
<body>
[ERROR ->]<my-app>
<div class="valign-wrapper">
<div class="preloader-wrapper active valign"): a@30:4 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse …推荐指数
解决办法
查看次数
禁用组件重用路由参数更改
我将angular2应用程序升级到稳定版本(来自rc1),并注意到ngOnDestroy当路径参数更改时不会触发.
与以前的版本,更改URL时match/123到match/124,的onDestroy叫我能够做一些清洁(例如,从WebSocket的退订特定的匹配).
有了这种新行为,我不确定最好的方法是什么？我可以强制组件再次重新初始化吗？
这是父结构,并且提到的组件使用路由器outled呈现
<div id="content">
<live-sidebar-component></live-sidebar-component>
<div id="page-wrapper">
<live-breadcrumbs></live-breadcrumbs>
<div id="page">
<router-outlet></router-outlet>
</div>
</div>
<div id="promobar">
<ticket-component></ticket-component>
</div>
</div>
推荐指数
解决办法
查看次数
路由'login'的配置无效:必须提供以下其中一项(component或redirectTo或children或loadChildren)
我正在学习Angular 2,我使用RC7遇到了这个问题.
app.routing.ts:
import { ModuleWithProviders, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { LoginRoutes } from './login/index';
import { DashboardRoutes } from './dashboard/index';
const routes: Routes = [
...LoginRoutes,
...DashboardRoutes
//{ path:'', component: GridViewComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: []
})
export class Ng2PlayRoutingModule { }
login.routes.ts
import { LoginComponent } from './index';
export const LoginRoutes = [
{
path: 'login',
component: LoginComponent
},
{ …推荐指数
解决办法
查看次数
当用户点击浏览器后退按钮时,Angular 2在路径之间反转幻灯片动画
我想用幻灯片动画为路线变化添加动画效果.当用户前进时,幻灯片从右向左滑动,当用户点击浏览器后退按钮时,我想恢复此动画,从左到右.
但我不知道如何获取浏览器按钮事件点击并在routerPageTransition中调用反向动画.
路由器page.animations.ts
import {trigger, state, animate, style, transition} from '@angular/core';
export function routerPageTransition() {
return slideToLeft();
}
function slideToRight() {
// This has the opposite animation of slideToLeft
}
function slideToLeft() {
return trigger('routerPageTransition', [
transition('void => *', [
style({position:'absolute', width:'100%', height:'100%', transform: 'translateX(100%)'}),
animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
]),
transition('* => void', [
style({position:'absolute', width:'100%', height:'100%', transform: 'translateX(0%)'}),
animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}))
])
]);
}
在每个组成部分:
import { Component, OnInit } from '@angular/core';
import { routerPageTransition } from './../../router-page.animations'; …推荐指数
解决办法
查看次数
Angular 2 authguard相对重定向
有没有办法在authguard中使用相对路径模式重定向？
我试过了
@Injectable()
export class ServerAuthGuard implements CanActivate {
constructor(private _router: Router,
private _route: ActivatedRoute) {
}
canActivate(route: ActivatedRouteSnapshot): boolean {
this._router.navigate(['../../servers/'], {relativeTo: this._route});
return false;
}
}
它应该重定向/projects/2/servers/71到/projects/2/servers/但它总是将其重定向到/servers(当我在一个组件中做同样的工作时它工作正常).
推荐指数
解决办法
查看次数
在延迟加载的模块初始化Angular2之前在路由器插座内加载屏幕
我正在尝试在路由器插座内显示加载屏幕,直到收到数据.
这是我在index.html中的代码
<root>
<div class="app-content text-center">
<div class="app-content-body" >
<div class="loader_div" >
<div class="loader"></div>
</div>
</div>
</div>
</root>
它按预期工作,但当我尝试在内部执行相同的代码时,即使在屏幕加载后,它仍保留在屏幕内.
一种可能的解决方案是我可以订阅路由器事件并使用instanceof NavigationStart和NavigationEnd.并使用ngIf从routeroutlet中删除DOM.
有没有其他更简单的方法来解决这个问题？
编辑1:在路由器事件中订阅后,我意识到这不是明智的决定.因为在多个嵌套路由器插座的情况下它将在整个页面中显示刷新屏幕而不是子路由器插座所在的部分.当我检查DOM时,<ng-component>不会替换<router-outlet>它,而是在完成标记后加载它.(</router-outlet>)是否是Angular2的错误？
推荐指数
解决办法
查看次数
发出路由器时出现无限重定向循环。使用Angular2 Router导航
注意使用相关代码段进行编辑
我遇到了一个奇怪的问题，在发出router.navigate时进入了无限重定向循环。
设定
- 我使用哈希位置策略，该应用程序用作Outlook插件。
- 我有三个路由规则
- “”重定向到“ /登录”
- “ /登录”映射到LoginViewComponent
- “ / foo”映射到FooViewComponent
LoginViewComponent具有两个行为：
- 如果无法验证用户身份，将提示用户输入凭据
- 如果不是，则将重定向发送到FooViewComponent
重定向仅通过以下逻辑位发出：
this.router.navigate(["foo"])
- 路线注册如下：
const routes: Routes = [
{
path: "",
redirectTo: "login",
pathMatch: "full"
},
{
path: "login",
component: LoginViewComponent
},
{
path: "foo",
component: FooComponentView
}
];
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true, enableTracing: true})],
exports: [RouterModule]
})
export class AppRoutingModule { }
问题
- 当我在LoginViewComponent的ngOnInit函数中发出重定向时，我进入了无限重定向循环。
- 它首先导航到FooViewComponent，然后重定向到LoginViewComponent。
- 据我了解，只有在调用router.navigate（[“”]）或router.navigate（[“ login”]）的情况下，才能重定向到LoginViewComponent。但是，在FooViewComponent中都没有这些导航命令。
推荐指数
解决办法
查看次数
在Angular 2中从解析器取消路线导航
我需要取消拒绝承诺的路由，并停留在当前页面上而不重定向到默认/错误页面，我尝试了不同的拒绝承诺的方法，但最终解决了该路由或重定向到了默认路由。
@Injectable()
export class ModelResolver implements Resolve<MyModel> {
constructor(private router: Router) {
}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<any> {
let params: any = route.params;
let model: MyModel= new MyModel();
return model.init().then((obj: MyModel) => {
return obj;
}).catch((err: any) => {
Promise.reject({message: err , ngNavigationCancelingError: true});
});
}
}
reject({message: err , ngNavigationCancelingError: true}); //重定向到我的默认路由
return Observable.throw({message: err , ngNavigationCancelingError: true}); //重定向到当前路由而不取消
resolve(null); or return Observable.empty() //重定向到当前路由而不取消
推荐指数
解决办法
查看次数
标签 统计
angular2-routing ×10
angular ×9
typescript ×3
angular-dart ×1
animation ×1
express ×1
jasmine ×1
javascript ×1
office-js ×1
redirect ×1
unit-testing ×1