我已经阅读了关于如何确定活动路线的这个问题,但是我还不清楚如何确定一个有参数的活动路线？
现在我这样做:
<a [routerLink]="['/Profile/Feed', {username: username}]"
[ngClass]="{active: getLinkStyle('/profile/john_doe/feed')}">
Feed for {{username}}
</a>
在我的组件内:
getLinkStyle(path:string):boolean {
console.log(this._location.path()); // logs: '/profile/john_doe/feed'
return this._location.path() === path;
}
这将有效,因为我将用户名作为字符串传递.有没有办法通过传递正确的参数？
我开发了一个小型Angular2测试应用程序,除其他功能外,还利用了路由.
只要用户首次访问主页,它就可以正常工作,然后导航到子页面.
如果用户尝试直接访问子页面,如果我没有配置Web服务器,则会得到404.这是完全正常的,因为没有对应于路线的"真实页面".
我尝试在apache 2.2中添加以下配置来处理HTML5 Push State:
<Directory /var/www/html/angular2-sens>
Options Indexes FollowSymLinks
RewriteEngine On
RewriteBase /angular2-sens
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /angular2-sens/index.html [L]
</Directory>
它使事情变得更好,因为我不再拥有404.但是,我"仅"被重定向到应用程序的主页并且不执行路由.
我该怎么做才能纠正这个问题？
我的index.html页面是:
<html>
<head>
<title>Angular 2 QuickStart</title>
<link rel="stylesheet" href="simplegrid.css" type="text/css">
<link rel="stylesheet" href="sen.css" type="text/css">
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.js"></script>
<script src="node_modules/angular2/bundles/http.js"></script>
<script src="node_modules/angular2/bundles/router.js"></script>
<!-- dev
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
-->
<!-- 2. Configure SystemJS -->
<script>
System.config({
map: {
rxjs: 'node_modules/rxjs' //or …在这种情况下,我使用Angular 2的RC5和最新的路由器遇到了这个问题.
我的routes.ts文件是这样的:
import {
provideRouter,
Routes,
RouterModule
}
from '@angular/router';
import {
OverviewComponent,
LoginComponent,
ProfileComponent
} from './shared';
import { AuthGuard } from './auth.guard';
import { HasToken } from './common/index';
const routes: Routes = [
{
path: '',
component: OverviewComponent,
canActivate: [AuthGuard]
},
{
path: 'login',
component: LoginComponent
},
{
path: 'profile',
component: ProfileComponent,
canActivate: [AuthGuard]
},
{
path: '**',
redirectTo: '/login'
}
];
export const authProviders = [AuthGuard, HasToken];
export const appRouterProviders = [
provideRouter(routes),
authProviders
];
export …我使用带有角度2的业力的单元测试.我在我的服务中添加了路由器,但是当我为此编写测试用例时,它通过我跟随错误.
Error: Can't resolve all parameters for Router: (?, ?, ?, ?, ?, ?, ?, ?).
这是代码
spec.ts
import 'rxjs/add/operator/map';
import { Http, BaseRequestOptions, Response, ResponseOptions,ConnectionBackend } from '@angular/http';
import { MockBackend, MockConnection } from '@angular/http/testing';
import { GlobalUtils } from './global.utils';
import { Router} from '@angular/router';
import { TestBed, inject } from '@angular/core/testing';
describe('Global Utils : Meta urls API', () => {
let emptyMetaUrl = {};
let metaUrl = {
LOGIN: '/operator/login',
META_API: '/meta-api'
};
beforeEach(()=>TestBed.configureTestingModule({
providers: [
Router, …我正在使用Angular 2.1.2.
我有一个身份验证令牌(使用angular2-jwt),如果它到期,我的webApi调用失败,出现401错误.我正在寻找一个解决方案,用户不会丢失任何输入数据.
我可以抓住这个401并用登录打开一个模态.然后用户登录,模态消失,他们看到他们的输入屏幕.但是,失败的请求显示错误,因此我需要重新处理请求.如果是路由器导航,则初始数据未加载.
我可以重新加载页面,但如果我router.navigate到同一页面,它似乎并没有真正重新加载页面.我不想在单页面应用上进行整页重新加载.有没有办法强制router.navigate运行,即使它是当前页面？
重新导航仍然是一个问题,因为我会丢失任何未保存的新输入数据.
理想情况下,请求只是"暂停",直到用户从模态登录.我还没有找到实现这个的方法.
有任何想法吗？有最好的做法吗？
尝试访问不允许的页面时,我尝试将用户导航到错误页面.问题是skipLocationChange在这种情况下不起作用.它导航到错误页面,但URL更改为根.如何保持原始网址用户？
resolve(route: ActivatedRouteSnapshot): Observable<any|boolean>|boolean {
return this.apiclientService.get('cars/' + route.params['id']).map(
response => {
if (response.data.user_id === this.authService.user().id) {
return response.data;
}
this.router.navigate(['/404'], { skipLocationChange: true });
return false;
}
).catch(error => {
this.router.navigate(['/404'], { skipLocationChange: true });
return Observable.of(false);
});
}
我想禁用网址编码.
当我在下面使用这个.
this.router.navigate(['/profile', { tags: 'one,two' }]);
网址是这样的
http://localhost:4200/profile;tags=one%2Ctwo
我希望它非常像下面
http://localhost:4200/profile;tags=one,two
有没有办法禁用网址编码？
我需要检查当前url是否有查询字符串.
网址可以
http://localhost:4200/test?id=55555
要么
http://localhost:4200/test
我用过
this.route.queryParams
.filter(params => 'id' in params)
.map(params => params.id)
.distinctUntilChanged()
.subscribe(
id=> {
//check lead Id here
console.log(id);
}
);
但这只适用于网址中有id的情况.不知道如何检查它是否存在.
我以这种方式在routing.ts文件中定义了路由.
const routesapp: Routes= [
{path:'user/id', component:UserComponent}
];
export const:routing ModuleWithProviders = RouterModule.forRoot(routesapp, {useHash:true});
并在HTML中
<li class ="Some class">
<a href= "#/user/{{id}}"> Link </a>
</li>
如何将其转换为与[routerLink]一起使用？从之前的帖子中我了解到我们无法使用[routerLink]添加插值,即[routerLink] = ['user/{{id}}']
我想在HTML中添加插值,我无法将其添加到路由文件中.另外,如何在HTML中覆盖useHash路由文件？
我正在开发angular2 web应用程序,我需要以下帮助.我的页面由多个组件组成.我想在用户点击按钮时滚动页面顶部.我试过
document.body.scrollTop = 0;但这不适用于Chrome.我试过document.documentElement.scrollTop = 0; window.scrollTo(0,0); 但没有工作
angular ×10
angular2-routing ×10
javascript ×3
typescript ×3
angular-cli ×1
angular2-jwt ×1
apache ×1
http ×1
karma-runner ×1
resolve ×1
unit-testing ×1
webpack ×1