标签: angular2-routing

我目前正在使用最新的angular.beta.0,并在路由器教程中遵循了他们的快速入门教程.该应用程序工作正常,但在检查生成的DOM时,会<undefined>生成一个标记.它不会导致任何问题,但我希望它得到澄清.

undefined标记包含整个app标记.

我有角度2的消息传递项目.

路由条件:

1) path: /login , component: LoginComponent
2) path: /inbox , component: InboxMessageComponent
3) path:/inbox/all , "Load InboxMessageListComponent in Right side Box Only",
4) path:/inbox/13 , "Load InboxMessageDetailComponent in Right side Box Only"

所以我创建了两个名为app-routing.module.ts和inbox-routing.module.ts的路由模块.

APP-routing.module.ts

@NgModule({
    imports: [
        RouterModule.forRoot([
            { path: 'login', component: LoginComponent},
            { path: 'inbox', component: InboxMessageComponent },
            { path: '', component: InboxMessageComponent },
            { path: '**', component: NotFoundComponent }
        ])
    ],
    exports: [RouterModule]
})

收件箱 - routing.module.ts

@NgModule({
    imports: [
        RouterModule.forChild([
            {path: '/inbox/list',component: InboxMessageListComponent},
            {path: '/inbox/detail/:id',component: …

在我的项目中,我有两名警卫.AuthGuard和PermissionGuard.我需要首先运行AuthGuard,当它解决时,如果是true,则权限保护开始,但现在这些守卫正在并行运行,而且权限保护不能正常运行.我用于此问题的方式是我在Permission guard中调用了AuthGuard CanActivate方法,但我认为有一种更好的方法可以做到这一点.

在访问之前我解决一个用户帐户片段我的用户页面:

APP-routing.component.ts

{
  path: 'users/:id',
  component: UserComponent,
  resolve: {user: UsersService},
  children: [
    {path: '', pathMatch: 'full', redirectTo: 'account'},
    {path: 'account', component: UserAccountComponent},
    {path: 'sites', component: UserSitesComponent}
  ]
}

users.service.ts

resolve(route: ActivatedRouteSnapshot, r: RouterStateSnapshot) {
  return this.getUser(route.params['id']);
}

用户account.component.ts

ngOnInit() {
  this.route.parent.data.subscribe(data => {
    this.user = data['user'];
    // Initialize the form and its validators
    this.initForm();
  });
}

在用户帐户组件中,我可以保存或重置表单.在这两种情况下,我都想更新组件的用户并重置表单和验证器.理想情况下,它会再次触发订阅.

知道如何手动触发旋转变压器吗？

(我曾经重新导航到与最后一个片段模拟一个随机数的相同路径,但是由于我将用户页面分解为父/子路径,因此当最后一个片段发生变化时,不再调用父级中的解析器)

我正在开发一个应用程序,我有一个用户区和一个管理区.我把它们分成了单独的Angular 2模块.我已经成功实现了延迟加载,因此只有在用户请求'/ admin'时才能加载管理模块.

从Angular 2文档中,我看到我可以像这样指定一个"canLoad"防护:

  {
    path: 'admin',
    loadChildren: 'app/admin/admin.module#AdminModule',
    canLoad: [AdminGuard]
  }

并在AdminGuard类中实现一个函数canLoad,如下所示:

canLoad(route: Route): boolean {
  return this.authService.isAdmin();
}

(其中isAdmin()可以调用后端API,后者将返回当前用户的角色或类似的东西)

但这是否会阻止任何非管理员加载AdminModule？除非我误解,所有这些代码都位于客户端,所以有什么可以阻止客户端修改"canLoad"方法以便它总是返回true吗？像这样:

canLoad(route: Route): boolean {
  return true;
}

从而允许客户端加载他们想要的任何模块.

显然,对需要管理员状态的后端API的任何调用都将受到保护,但似乎任何用户都可以查看管理UI,这对我来说似乎有点奇怪.有人可以为我清楚这一点吗？

我目前正在尝试使用angular2(beta1),我对新路由器有点疑惑.

通过router.navigate导航就像一个魅力,而尝试通过注册路由的正常链接来刷新页面.当然,这与PathLocationStrategy一起发生,因为HashLocationStrategy按预期工作.

这是一个错误还是正常行为？

TIA

在agnular2中是否有api允许传递json对象而不是字符串值.例如,Router.navigate()我可以传递路由参数

Router.navigate('routename',[{key:stringvalue}])

并可以使用RouteParams.get(key) : string.但这只返回字符串值.我需要传递json对象.

感谢任何指针

我有一个html所在的homecomponent

//home.component.html

<router-outlet></router-outlet>

//home.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { HomeService} from './shared/services/home.service';

@Component({
  // moduleId: module.id,
  selector: 'app-home',
  templateUrl: 'home.component.html',
  styleUrls: ['home.component.css'],
  providers:[HomeService]
})
export class HomeComponent implements OnInit {

  constructor(private service:HomeService , private route:Router) { }

  ngOnInit() {
    if(this.service.isAuthenticated()){
      this.route.navigateByUrl('dashboard/main');
    }
  }
}

//home.component.spec.ts

import { ComponentFixture, TestBed  } from '@angular/core/testing';
import { By }              from '@angular/platform-browser';
import { DebugElement }    from '@angular/core';
import { async, inject } from …

我正在创建一个angular2-meteor应用程序。

export const routes: Route[] = [{
    path: '',
    redirectTo: "login",
    pathMatch: "full"
}, 
{
    path: 'login',
    component: LoginComponent
}, 
{
    path: 'csvtemplate',
    component: TemplateComponent,
    canActivate: ['canActivateForLoggedIn'],
    children: [{
        path: '',
        redirectTo: 'dashboard' <----how to add condition for multiple path
    }, 
    {
        path:'dashboard',
        component: DashboardComponent
    },
    {
        path: 'csvtimeline/:month/:year',
        component: CsvTimelineComponent
    }, {
        path: 'csvjson',
        component: CsvJsonComponent
    }]
}];

当我使用LoginComponent登录到我的应用程序时，它将转到具有三个子组件的TemplateComponent

• 仪表板
• csv时间轴
• csvjson

现在，默认情况下，我将redirectTo设置为我的仪表板组件。但是我想根据登录用户配置文件重定向到csvjson组件或csvtimeline组件，以代替此重定向。

假设

如果登录用户是“管理员”，则应将其重定向到->仪表板组件

如果登录用户是“来宾”，则应该将其重定向到-> csvjson组件

我知道我们可以在仪表板组件的ngOnInit（）中进行重定向。

if (this.user && this.user.profile.role == 'Guest') {
             this._router.navigate(['csvtemplate/csvjson']);
        }

但是我正在寻找更好的选择，因此我不必每次都打开仪表板组件，它将直接转到csvjson组件。

如果用户从具有脏表单的页面导航,我成功使用canDeactivate提供警告消息:

我正在使用的代码在这里:

    is_submit = false;
   canDeactivate() {
       //https://scotch.io/courses/routing-angular-2-applications/candeactivate
        if (this.myForm.dirty == true && this.is_submit==false){
            return window.confirm('Discard changes?');
        } //end if
        return true
    } // end  canDeactivate

这是我得到代码的地方:

https://scotch.io/courses/routing-angular-2-applications/candeactivate

但是我想使用angular2对话框.这是我的代码:

    //ts for the main component

    is_submit = false;
   canDeactivate() {
        if (this.myForm.dirty == true && this.is_submit==false){
            const config = new MdDialogConfig();
            config.disableClose=true;
            let dialogRef = this.dialog.open(DialogCanDeactive,config);
            dialogRef.afterClosed().subscribe(result => {
                if (result=='cancel'){
                    return false;
                } 
                if (result=='save'){
                    return true;
                } 
                if (result=='discard'){
                    return true;
                } 
            }); //end dialogRef
        } //end if
        return …