标签: angular2-routing

我正在使用angular2构建单页面应用程序,它需要根据应用程序的路由呈现不同的应用程序模板.在最高级别,它应该能够在主应用程序模板和应用程序的管理模板之间切换.

路由规则:

• 如果url路径以/ auth开头,那么它由AuthApp处理
• 如果它以其他任何东西开头,则应由MainApp处理

执行:

为了实现这一点,我有一个最高级别的组件应用程序,它将责任委托给AuthApp或MainApp,就像这样.

@RouteConfig([
  {
    path: '/auth/...',
    component: AuthApp,
    as: 'Auth'
  },
  {
    path: '/...',
    component: MainApp,
    as: 'Main'
  }
])

然后每个子应用程序(例如AuthApp,MainApp)都有自己的路由定义,例如这个.

@RouteConfig([
  { path: '/current-vacancies', CurrentVacancies, as: 'CurrentVacancies', useAsDefault: true },
  { path: '/candidates/create', CandidateCreate, as: 'CandidateCreate'},
  ...
])

功能上,从设计的角度来看,这非常有用!

问题:

在主应用程序中,应用程序的路由配置未指定路径(例如/...=> MainApp),我不想要嵌套的URL路径.例如,如果您通过应用程序(routerLink)导航到CurrentVacancies,它会更新网址并预先添加额外的不需要的正斜杠..../#//current-vacancies当我希望它读取时,url路径现在看起来像这样.../#/current-vacancies.

当您.../#/current-vacancies在地址栏中键入时,应用程序路由实际工作正常,它会正确转换.然而,通过应用程序routerLink指令进行导航会预先添加不需要的正斜杠.

我从逻辑上理解为什么会发生这种情况,委托给MainApp的根组件有一个'/'路径,它与它的子组件连接在一起形成一个完整的url路径.但在这种情况下,不希望有额外的斜线.任何想法我如何删除它,或以某种方式覆盖此行为.

顺便说一下,我考虑过将MainApp组件路由移到最顶层,虽然这确实解决了我报告的url路径问题,但它不允许我在顶层切换模板.

综上所述

请帮帮我

• 如何删除/主应用程序路由上不需要的内容"preferred option",或
• 设计应用程序如何使用嵌套组件路由获得可切换的顶级模板.

谢谢

我正在寻找$urlRouterProvider.otherwiseAngular 2中的等价物.

更多细节:

我有这样的路由器定义:

@RouteConfig([
  { path: "/", component: MultiPost, name: "Home", useAsDefault: true },
  { path: "/m/:collectionName/:categoryName/:page", component: MultiPost, name: "MultiPost" }
])

这两条路线都运行得很好,例如当我击中/或/m/sth/sth/0得到我想要的东西时.

但是,当我点击随机网址时,/kdfsgdshdjf没有任何反应.页面呈现并且<router-outlet>为空,因为没有匹配的路由.

我想要做的是将所有不匹配的路由重定向到默认路由.我需要类似的东西$urlRouterProvider.otherwise("/");.

有谁知道怎么做？

是否有一种干净的方式来获取当前路线的组件？

这似乎有效,但似乎非常hacky:

 this.router.currentInstruction.
  component.componentType.prototype.somePropertyOrFunction();

我最近更新了我的angular2版本并遇到了以下问题:

1. 路由器lib不再存在,已被路由器弃用.

2. 我有这个菜单组件:

   import { Component }       from '@angular/core';
   import { DashboardComponent } from './dashboard.component'
   import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
   
   @Component({
     selector: 'main-menu',
     templateUrl: 'app/views/menu.html',
     directives: [ROUTER_DIRECTIVES],
     providers: [
       ROUTER_PROVIDERS
     ]
   })
   
   @RouteConfig([
     {
       path: '/dashboard',
       name: 'Dashboard',
       component: DashboardComponent,
       useAsDefault: true
     }
   ])
   
   export class MenuComponent {}
   

   Run Code Online (Sandbox Code Playgroud)

3. 当我尝试加载它时,应用程序失败,因为它无法解析路由器所需的文件 - 已弃用.我收到以下错误:

错误的图像

我可能错过了一些简单的东西,但是尝试使用新的组件路由器我无法让VS Code识别它.

我改变了我的所有@angular引用中package.json来2.0.0-rc.2; 运行npm install和VS Code不喜欢我的导入:

当我导航到该@angular/router文件夹node_modules,并检查index.d.ts我看到RC1路由器的所有参考.删除@angular文件夹并重新安装,结果相同.

我有一个应用程序,其路由将如下所示:

/:partner/login
/:partner/tools
/:partner/other

目前正在使用2.0.0-rc.5,我可以非常简单地构建完全如上所述的路线.但是,这种方法的缺点是每个组件都必须partner自己提取参数.所以login路径声明看起来像:

{
    path: ':partner/login',
    component: LoginComponent
}

而LoginComponent将如下所示:

export class LoginComponent implements OnInit {
    partner: string;
    constructor(private _route: ActivatedRoute) { }

    ngOnInit() {
        this._route.params.forEach(p => {
            this.partner = p[`partner`];
        });
    }
}

虽然这是管理与3条路线,在概念上,我真正想说的是,我有一个PartnerComponent具有子路由login,tools等路由应该是这样的:

{ path: ':partner', component: PartnerComponent
    children: [
        { path: 'login', component: LoginComponent},
        { path: 'tools', component: ToolsComponent}
    ]
 }

使用TypeScript的继承,我可以为每个子节点创建一个基本组件,如:

export class BaseComponent implements OnInit {
    partner: string;
    constructor(private …

Plunkr 3级菜单

我想尝试3级菜单,但似乎无法做到正确

 RouterModule.forRoot([
        { path: '', component: PagesComponent, pathMatch: 'full'},
        { path: 'Page1', component: Page1Component, outlet: 'leftMenu'},
        { path: 'Page1/Page1Child1', component: Page1Child1Component, outlet: 'contentOutlet'},
        { path: 'Page2', component: Page2Component, outlet: 'leftMenu'}
    ], { enableTracing: true })

从左侧菜单,我想在内容中加载所选页面(页面中心)

我尝试Angular 2路由.

我的应用程序有4页和4个路由(r1,r2,r3,r4).我想将这两组页面分开.r1和r2的"内容1"字段将是相同的.对于r3和r4,"内容1"字段将相同,"内容2"字段将针对每个路径更改.

我可以通过调用模板中的组件来完成此操作,但正在重新编译"内容1"字段.

我不想使用AUX路由.URL看起来很难看.

我之前可以在Angular 1中完成这个.我怎么能在Angular 2中做到这一点？

我正在尝试创建路线保护,阅读一些博客和Angular 2官方文档.但我仍然无法使其发挥作用.

这是RouteGuard(我已经删除了日志记录逻辑,以确保问题出在路由中,而不是在身份验证逻辑中.):

import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { Router, CanActivate, CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class RouteGuard implements CanActivate {
  constructor() {
    var a = 5;
    console.log("RouterGuard called");
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    console.log("RouterGuard called");
    return true;
  }
}

我在这里有一些路线:

import { RouteGuard } from './common/routeGuard';
import { ClassifiersComponent } from './components/classifiers/classifiers.component';
import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';

export …

我想懒惰加载我的模块,但同时使用canActivate保护它.我试过了:

{ path: 'dashboard/vendor', canActivate: AuthGuard, loadChildren: 'app/module/dashboard/vendor/vendor.module#VendorModule' }

请注意,我没有使用子项,因为我使用RouterModule.forChild在vendor-routing.module中定义了供应商路由.

但它不起作用.有什么建议？