如果Angular 2中的解析失败,如何重定向到另一个页面？我将此解析称为我的编辑页面,但我想处理Resolve页面中的错误
我的决心:
resolve(route: ActivatedRouteSnapshot): Promise<any>|boolean {
return new Promise((resolve, reject) => {
if (route.params['id'] !== undefined) {
this.dataService.getHttpEmpresaShow(this.endpoint_url_Get + route.params['id'])
.subscribe(
result => {
console.log("ok");
return resolve(result);
},
error => {
return resolve(error);
});
}});
我试图使用typescript函数中的location.go服务导航到特定的URL.它会更改浏览器中的URL,但URL的组件不会反映在屏幕中.它保留在登录(实际)屏幕上 - 例如:
constructor(location: Location, public _userdetails: userdetails){
this.location = location;
}
login(){
if (this.username && this.password){
this._userdetails.username = this.username;
this.location.go('/home');
}
else{
console.log('Cannot be blank');
}
}
我缺少一个编译方法或刷新方法吗？
我已经定义了许多路由如下:
export const AppRoutes: Routes = [
{path: '', component: HomeComponent, data: {titleKey: 'homeTitle'}},
{path: 'signup', component: SignupComponent, data: {titleKey: 'SIGNUP_FORM.TITLE'}},
{path: 'signin', component: SigninComponent, data: {titleKey: 'SIGNIN_FORM.TITLE'}},
{path: 'sendpasswordresetinformation', component: SendPasswordResetInformationComponent},
{path: 'password/reset/:userAccountToken', component: PasswordResetComponent},
{
path: 'dashboard', component: DashboardComponent, children: [
{path: '', component: DashboardSummaryComponent},
{
path: 'message', children: [
{path: '', component: MessageSummaryComponent, data: {titleKey: 'MESSAGE_LIST.TITLE'}},
{path: 'conversation/:otherId', component: MessageConversationComponent, data: {titleKey: 'XXX'}}]
},
{
path: 'useraccount', component: UserAccountComponent, children: [
{
path: '',
component: UserAccountSummaryComponent,
data: …在浏览应用程序本身时使用动态生成的链接时,RouterLinkActive无效.
例如,在我的顶部导航中,我有这个;
<a [routerLink]=['user', currentUser.name] routerLinkActive='active'>{{currentUser.name}}</a>
虽然硬编码版本可行.
<a [routerLink]=['user','bob']>View Bobs Account</a>
这里有一个插件; https://plnkr.co/edit/BYKMucE3Y75uJSpV5VWx?p=preview
单击"John","Dynamic Router Link Name ="和"John"都应该处于活动状态.这有时适用于第一次点击,如果是这样,然后点击返回"主页",再次单击"约翰",您将看到只有硬编码链接被注册为活动,即使hrefs相同.
这是设计/不可能吗？还是我设置错误的东西？
我有一个Angular 2.0(稳定版)应用程序,其中一个实体是project.对于其中的每一个projects,我的细节分布在不同的部分/路线上:
project/:id/overviewproject/:id/documentsproject/:id/logs用于project在单个调用中返回大部分数据的API ,因此我需要调用一次,并使其可用于不同的子路由.
我的路线看起来像:
export const routing: ModuleWithProviders = RouterModule.forChild([
{ path: 'projects', component: ProjectsComponent },
{ path: 'project/new', component: NewProjectComponent },
{
path: 'project/:id',
component: ProjectDetailComponent,
resolve: {
project: ProjectDetailResolve
},
children: [
{ path: '', redirectTo: 'overview', pathMatch: 'full' },
{ path: 'overview', component: ProjectOverviewComponent },
{ path: 'documents', component: DocumentsComponent },
{ path: 'logs', component: LogsComponent },
]
}
]);
ProjectDetailComponent 目前使用Resolver成功获取项目数据(没有问题):
ngOnInit() {
this.route.data.forEach((data: { …我有一个简单的路由器防护,我正在尝试测试canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ).我可以像这样创建ActivatedRouteSnapshot,new ActivatedRouteSnapshot()但我无法弄清楚如何创建一个模拟RouterStateSnapshot.
根据我试过的代码......
let createEmptyStateSnapshot = function(
urlTree: UrlTree, rootComponent: Type<any>){
const emptyParams = {};
const emptyData = {};
const emptyQueryParams = {};
const fragment = '';
const activated = new ActivatedRouteSnapshot();
const state = new RouterStateSnapshot(new TreeNode<ActivatedRouteSnapshot>(activated, []));
return {
state: state,
activated: activated
}
}
但import {TreeNode} from "@angular/router/src/utils/tree";似乎需要进行转换或者其他因为我得到......
未捕获的SyntaxError:webpack上的意外的令牌导出:///~/@angular/router/src/utils/tree.js:8:0 < - test.bundle.ts:72431
以下代码有效:
/*app.module.ts*/
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { LetterRecall } from './letterRecall/letterRecall.component';
@NgModule({
imports: [BrowserModule, HttpModule],
declarations: [AppComponent, LetterRecall],
bootstrap: [AppComponent],
})
export class AppModule {}
/*app.component.ts*/
import {Component} from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent { }
/*app.component.html*/
<h3>Title</h3>
<letter-recall></letter-recall>
遵循Angular Routing Tutorial:https://angular.io/docs/ts/latest/tutorial/toh-pt5.html
我将我的代码修改为:
/*index.html*/
<head>
<base href="/">
/*app.module.ts*/
import { NgModule } from '@angular/core';
import { HttpModule …我正在使用angular2开发一个应用程序.我有一个场景,我需要在路由时使用复杂数据(对象数组)从一个组件传递到另一个组件(它们不是父子,它们是两个独立的组件)(使用router.navigate()).我用Google搜索了这一点,大部分结果都描述了父子组件的场景.我已经完成了结果并找到了传递数据的方法.
1)创建共享服务2)作为路由参数传递
第二种方法对我有效(尽管如此,当我有如上所述的复杂数据时,我不喜欢这种方法).我无法使用共享服务共享数据.所以我的问题是,使用服务的组件之间传递数据只在组件处于父子关系时才有效吗？另外,请告诉我是否还有其他优先方法可以在一个组件和另一个组件之间传递数据？
更新:我在我的场景中添加了一些代码.请让我知道为什么通过共享服务传递数据不起作用的错误.
我有2个组件:1)SearchComponent 2)TransferComponent我在SearchComponent中设置数据,并希望通过utilityService访问TransferComponent中的数据.
公用事业服务
import {Injectable} from "@angular/core";
@Injectable()
export class UtilityService{
constructor(){
}
public bioReagentObject = [];
routeBioReagentObj(bioReagentObj){
console.log("From UtilityService...", bioReagentObj);
for (let each of bioReagentObj)
this.bioReagentObject.push(each)
// console.log("From UtilityService",this.bioReagentObject);
}
returnObject(){
console.log("From UtilityService",this.bioReagentObject);
return this.bioReagentObject
}
}
searchcomponent.ts
import {UtilityService} from "../services/utilityservice.component";
import {Component, OnInit, OnDestroy, Input} from '@angular/core';
@Component({
selector: 'bioshoppe-search-details',
providers: [UtilityService],
templateUrl: 'app/search/searchdetails.component.html',
styleUrls: ['../../css/style.css']
})
export class SearchDetailsComponent implements OnInit, OnDestroy {
constructor(private route: ActivatedRoute,
private utilityService: UtilityService,
private router: Router) …我正在努力在Angular 2.4.2中导航期间清除URL参数.我已尝试附加每个选项以清除下面导航线中的参数,或者使用导航或navigateByUrl中的任何混合,但无法弄清楚如何完成.
this.router.navigateByUrl(this.router.url, { queryParams: {}, preserveQueryParams: false });
作为一个例子,我在路线,/section1/page1?key1=abc&key2=def并希望保持在相同的路线,但删除所有的url参数,所以最终的结果应该是/section/page1
让我们假设我有3个网址:
/:projectId/info,
/:projectId/users,
/:projectId/users/:userId/profile.所有这些都有参数projectId.UI有一个组件可以从一个项目切换到另一个项目.所以我需要:
所以我需要一些类似的this.router.replaceParam(currentUrl, {projectId: 'project_id_2'})内容将转换/project_id_1/users/user_id_1/profile为/project_id_2/users/user_id_1/profile(以及任何其他带有:projectIdparam的URL )
我认为这是一个简单而常见的问题,但在1小时内没有找到解决方案.此处建议的解决方案不起作用,如上一条评论中所述