标签: angular2-routing

可用于使用路由功能装饰组件(@RouteConfig)的RouteConfig类具有为该组件定义的某些路由定义.现在,问题是在运行时(动态)注入这些路由定义.

原因是,假设我有一个应用程序,其中我必须显示(UI)和定义(修饰)'n'个路由,每个路由对应于加载应用程序的帐户,因此与之关联的权限特别帐户.因此,在装饰器@RouteConfig中为组件预定义路径定义没有任何意义.

我的方法是每次加载新帐户时拨打服务电话.并且仅检索关联的路线并在运行时注入它们以便导航到与该帐户的UI中显示的每个路线相对应的其他相应组件.

import { Summary } from './components/summary';

@RouteConfig([
  /*
    Let's say we need a seller dashboard to be displayed...
  */
  //{ path: 'SellerDashboard', component: SellerDashboard }
  { path: '/', component: Summary }
])
class App {
    contactInfo: ContactInfoModel;
    public App(dataService: DataService) {
        this.model = dataService.getContactInfo();
    }
}

在上面的代码段中,假设我希望将与卖方帐户对应的卖方信息中心加载到我的应用程序中.现在,它赢得了任何意义:显示销售点仪表板或与卖方无关的任何内容(在我们的案例中,卖方的库存仪表板与卖方相关).

在要点中,只注入那些需要的路由,而不是在同一个地方配置所有路由.

编辑1:

这个问题有一个简单的用例或场景,而不是这篇文章上标记的重复(事后有人问过).这篇文章中提到的答案有更简单的方法,也更直观.

我在Angular2中有一个组件,用于托管用户表(userTableComponnent)和另一个userDetails组件.单击users表中的一行后,我想要路由到userDetails.一种实现方式是仅传递userId,因此在userDetails中,我使用另一个http get获取用户的详细信息.但是,这是多余的,因为我抓取了userTableComponent中的所有用户信息.所以我真正需要的是将User对象从userTableComponent传递给userDetails.知道如何通过路由实现它吗？

我的路由定义为/ abc /:id/xyz

其中abc /:id解析为ComponentA,而/ xyz是路由器插座中显示的子组件(ComponentB)

当导航到/ abc /:id/xyz时,当我在ComponentA中执行this.route.params.subscribe(...)(其中route是ActivatedRoute)时,我看到:id.在ComponentB中做同样的事情我没有看到:id.我猜ActivatedRoute正在使用url段.

无论如何要获得路线中的所有参数？

我正在玩Angular 2,我遇到了路由器的麻烦.我想在主路由器插座内安装第二个路由器插座.

在第一个路由器插座内,我重定向到主页,我有第二个路由器插座:

<router-outlet name="main"></router-outlet>

这是我没有导入的app.routing.

const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'login', component: LoginComponent},
    { path: 'days', component: DaysComponent, outlet: 'main'}
];

export const appRoutingProviders: any[] = [

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

在HomeComponent ngOnInit我有这个

this.router.navigateByUrl('/(main:days)');

但这会导致网络崩溃,并出现以下错误:

未捕获(承诺):错误:找不到加载'DaysComponent'的插座主页

怎么可能在主要的内部有第二个路由器插座？

谢谢.

我有一个有角度的2应用程序,我使用路由器在视图之间导航,就像其他人一样.以下是我的特定组件的路径:

{
    path: 'home/view1/:viewID',
    component: ViewComponent,
    children: [
        { path: 'pane/:paneId/section/:sectionId', component: SectionEditComponent },
        { path: '**', component: ViewEditComponent }
    ]
},

现在,我在ViewComponent上有两个按钮,为section1和section2加载SectionEditComponent.

Path1:pane/1/section/1
Path2:pane/1/section/2

ViewComponent模板:

   <div class="col-md-8" style="background-color: white; height: 100%">
       <button (click)="loadPath(1)">Path1</button>
       <button (click)="loadPath(2)">Path2</button>
       <router-outlet></router-outlet>
   </div>

现在,当我从同一ViewComponent中的Path1-> Path2或Path2-> Path1导航时,不会调用ngOnInit(),因此不会加载新路径,即使url实际上根据新的部分ID进行了更改.

这是已知的还是预期的行为？有什么我做错了吗？

我们正在努力实现Angular 2的结构,并试图决定Angular 2是否适合我们.

我们假设;

• 有一个应用程序只包括侧面导航菜单,标题和容器.
• 项目中有一百页(每个页面都包含大量的业务表单).每种形式都是独立的模块.
• 有3个团队参与了这个项目.
• 用户将启动这些表单并在容器中查看.
• 每个页面都使用相同的共享模块,如@ angular,core-js,rxjs,zone.js等.

有了这样的应用,我们希望所有团队成员在需要时单独和单独构建和部署每个表单.我们还希望每个团队成员都能在一个相关的表单上工作,就像它是一个不同的项目一样.

我想我们在实时服务器中有以下文件夹结构.是不是真的有办法实现这一目标？

这是部署的文件夹组织

这是项目文件

在page-99完成开发之后,我只想构建和部署自己(如Dist文件夹中所示).之后,主应用程序将在加载该组件时注入服务.

Angular 2真的可以吗？

提前感谢大家与我分享您的想法和信息.

现在,我的网站的网址看起来像这样,因为我正在使用此处描述的方法

HTTP://本地主机:4200 /#/ cadastro

是否可以删除网址中的哈希值而不会出现404错误？

编辑:路由器模块添加

const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'cadastro', component: CadastroNoivosComponent },
    { path: '**', component: HomeComponent }
];

export const routing = RouterModule.forRoot(appRoutes);

我们有一个客户端在我们的应用程序中iFraming到他们的网站.他们不希望我们的应用程序中的路由器导航影响他们自己的站点的后退按钮导航.

我们尝试了几种方法,包括使用post消息尝试让iFrame在触发history.back()时与父窗口进行通信.

我的问题是,在使用Angular 2的路由器时,是否有任何简单的方法可以不影响浏览器的历史记录.据我所知,我在Angular 2的高级路由器文档中找不到任何内容:https://angular.io/docs/ts/latest/guide/router.html

在Angular2中,如何检查路由是否存在？

我有一个方法,可以记住如果用户未经授权,导航到哪个路由.

登录时我有:

this.router.navigate([this.authService.redirectUrl]);

但我只想导航如果redirectUrl引用了一个有效的路由,比如..

if (this.authService.redirectUrl is a valid route) {
  this.router.navigate([this.authService.redirectUrl]);
}

有没有办法检查这个？

我最近开始学习angular4,目前正致力于角度路由.我遵循了角度路由文档,并开始实现子路由的一些简单功能.我坚持不懈.以下是我的代码.谁能告诉我我做错了什么？

仪表板模块导入到根模块中,该模块有自己的路由. app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { DashboardModule } from './dashboard/dashboard.module';

@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent,
  ],
  imports: [
    BrowserModule,
    DashboardModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

根级路由模块,具有重定向到仪表板组件的默认路由. app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } …