标签: angular2-routing

我正在尝试使用 redux(ngrx) 创建一个“身份验证应用程序”，并且我正在尝试在秘密守卫中使用我的应用程序状态。在这里你可以看到我的 github：https : //github.com/tamasfoldi/ngrx-auth/tree/router 这是我的守卫的样子：

@Injectable()
export class SecretGuard implements CanActivate {
  constructor(private store: Store<AppState>, private router: Router) {
  }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.store.let(getLoginState())
      .map(state$ => state$.isLoggedIn)
  }
}

它返回 isLoggedIn 属性，这应该没问题，因为路由器解析了 promises 和 observable，但是当我导航到秘密部分时路由器阻止了它。以下是我的路线：

export const appRoutes: Routes = [
  {
    path: '',
    redirectTo: 'auth',
    pathMatch: 'full'
  },
  {
    path: 'auth',
    children: [
      { path: '', redirectTo: 'login', pathMatch: 'full' },
      { path: 'login', component: LoginComponent },
      { path: 'register', component: RegisterComponent …

我有一条看起来像这样的路线：

/dashboard/55612291A38AB9CB1C8FE7FB7A166E63/(report//right:logs)

这意味着我有一个 DashboardComponent，在其中我在主要出口内打开了一个 ReportComponent。在我的 DashboardComponent 中，我还有一个已命名的插座（右侧），其中 LogsComponent 处于打开状态。

<dashboard>
    <router-outlet></router-outlet>
    <router-outlet name="right"></router-outlet>
</dashboard>

在我的 ReportComponent 中，我想在正确的插座中打开当前组件的值。有没有一种简单的方法来实现这一目标？

现在似乎可以做

this.route.snapshot._urlSegment.parent.children.right.segments[0].path

有点冗长。谢谢。

我正在尝试使用在其路由配置文件中声明的子路由延迟加载模块，延迟模块加载成功，但我无法导航到它的子路由。

我正在使用该技术，就好像它是一个急切加载的模块一样。我声明了路径，里面是孩子。请参阅 Plunker 中的“moduleB”路由文件链接按钮正在尝试导航到子路由并加载 CmpC。但它失败了。

这是我的根模块路由声明：

{ path: 'feature-b', loadChildren:'src/featureB/featureB.module#FeatureBModule' ,  pathMatch: 'full'}

这是我的延迟加载模块路由声明。

export const moduleBRoutes: Routes = [

  { path: '', component:CmpC , pathMatch: 'full',children:[
      {path: '' , pathMatch: 'full'},
      { path: 'c', component:CmpB , pathMatch: 'full'}
  ]},

];

export const subRouting: ModuleWithProviders = RouterModule.forChild(moduleBRoutes);

尝试导航到：localhost:999/feature-b 成功

试图导航到：localhost:999/feature-b/c 失败

https://plnkr.co/edit/wFlJoDXRmAlMOswmwWFk?p=preview

我在 app-routing.module 中定义了一个重定向，但不知道为什么它不起作用。如果我使用“”（当前已注释掉的代码）的默认路径而不是重定向，那么它可以正常工作。

@NgModule({
imports: [
    RouterModule.forRoot([
        {
            path: "actions",
            component: ActionsComponent
        },
        //{
        //    path: "",
        //    component: LoginComponent
        //}
        {
            path: "",
            redirectTo: "/login",
            pathMatch: "full"
        }
    ])
],
exports: [
    RouterModule
]

})

有任何想法吗？代码在http://plnkr.co/edit/y970zDKDZRIZ5LQA8v1T?p=preview

我在主/详细视图中遇到路由问题。如果我去的路线/master中InfoComponent应该表现出一些基本信息。如果我去/master/1了DetailsComponent应显示为ID 1.在这两种情况下，该项目的一些数据，MasterComponent应该显示无论是选择的ID或没有。

我可以很好地完成这项工作。但问题是我想订阅:idinOnInit中的选定内容，MasterComponent以便我可以在那里突出显示它，如下所示：

this.selectedId = this.route.params.map((params: Params) => params["id"])

但这不起作用，因为它:id是一个子路由参数。而且我无法使用，this.route.firstChild因为 firstChild 将是另一条路线，具体取决于是否显示InfoComponent或DetailsComponent正在显示。

:id当MasterComponent显示两个子组件之间发生变化时，我可以获得一个可观察的（of ）吗？

这是我的路由模块：

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: "master",
                canActivate: [AuthenticationGuardService],
                children: [
                    {
                        path: "",
                        component: MasterComponent,
                        children: [
                            {
                                path: "",
                                component: InfoComponent
                            },
                            {
                                path: ":id",
                                component: DetailsComponent
                            }
                        ]
                    }
                ]
            }
        ])
    ],
    exports: [ …

我有一个带有延迟加载模块的应用程序。

在一个特定的延迟加载模块中，我有一个父组件，它具有router-outlet.

在该父组件中，我有一个按钮，它基本上使用共享服务（在延迟加载模块上提供）发出事件。

每个子组件（在 中加载router-outlet）都使用相同的共享服务订阅该事件！

我尝试使用英雄演示在以下plunkr 中重新创建我的用例。

get(){
  if (!this.testEvent.closed) {
      this.testEvent.complete();
      this.testEvent.unsubscribe();
    }
    this.testEvent= new EventEmitter<void>();
    return this.testEvent;
  }
}

  ngOnDestroy() {
    this.testEvent.unsubscribe();
  }