我似乎无法使用Angular 2中的子项进行路由.该应用程序是我的第一个Angular 2应用程序,它非常简单,顶部有一个导航栏,可以填充页面下半部分的内容.每当我点击任何导航链接时,他们都导航到同一个孩子,甚至更糟糕的是那个孩子的内容堆叠,这意味着我点击一次,孩子加载到下面,我再次点击它再次加载下面,所以我有两次,等等.

完整内容可以在这里找到: plunker

这是我的searching.routing.ts文件:

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AdvancedSearchComponent } from './advanced-search/advanced-search.component';
import { GuidedSearchComponent } from './guided-search/guided-search.component';
import { QuickSearchComponent } from './quick-search/quick-search.component';

const searchesRoutes: Routes = [
    {
        children: [
            { path: 'advanced-search', component: AdvancedSearchComponent },
            { path: 'guided-search', component: GuidedSearchComponent },
            { path: 'quick-search', component: QuickSearchComponent }
        ],
        path: '',
        component: GuidedSearchComponent
    }
];

export const searchesRouting: ModuleWithProviders = RouterModule.forChild(searchesRoutes);

这是我的app.routing.ts文件:

import { ModuleWithProviders …

在Angular2 RC1和更低版本中调用路由链接总是导致组件重新加载:

<a [routerLink]="['/page', {id: 1}]">A link </a>

使用Angular2,无RC,如果组件使用不同的参数导航到自身,则不会重新加载该组件.有没有办法让重新加载行为回来？

我理解处理此问题的另一种方法,从ActivatedRoute订阅并检测到变量,但这会导致组件逻辑的复杂性增加.

在我当前的项目中，我有以下观点

当页面加载时，Parent Item Description应该可见和不Selected sub item description应该可见。

当我选择 a 时Sub Item x，Parent Item Description应该隐藏并且只有Selected sub item description可见的。

我为此创建了以下路线

{
        path: 'main/:id',
        component: MainComponent,
        children: [
          {
            path: '',
            component: MainComponent,
            pathMatch: 'full',
          },
          {
            path: 'sub/:id',
            component: SubComponent
          }
        ]
      },

但是当运行该项目时，它并没有像我期望的那样工作。

我添加了一个<router-outlet></router-outlet>来加载子项目描述，但是当我转到主项目时，主项目本身复制在那个router-outlet.

总之，我希望仅在右侧加载所选项目的描述。

是否可以通过路由器发送复杂对象？这是我正在做的和尝试做的事情:

在搜索页面中,用户可以单击其中一个结果上的按钮,该结果调用导致此行触发的方法. this.router.navigate(['profile-detail', selection]);

该selection物体看起来像这样只是导航之前.

{
  profile: {
    id: number,
    fname: string,
    lname: string
  },
  contact: {
    type: string,
    address: string
  },
  books: [{
    title: string,
    author: string
  }]
}

但是,当我们到达profile-detail页面时,将this.route.snapshot.params其作为实际数据:

{
  profile: "[object Object]",
  contact: "[object Object]",
  books: "[object Object]"
}

AppRouting.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from '../buyer/home/home.component';
const routes: Routes = [
   {path: '', redirectTo:'buyer', pathMatch:"full"}
]
@NgModule({
  declarations:[],
  imports:[
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
   exports:[RouterModule]
})

export class AppRoutingModule {}

BuyerRouting.ts

import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core'; 
import { Routes,RouterModule } from '@angular/router';

import { WelcomeComponent } from './welcome/welcome.component';
import { HomeComponent } from './home/home.component';

@NgModule({
declarations:[],
imports:[
    CommonModule,
    RouterModule.forChild([ …

这是一个非常令人沮丧的问题。除了这最后一件事，我已经完成了我的应用程序。我一直在监听路由器上的变化，并试图让它在发生变化时自动滚动到顶部。我真的在 Google 上尝试了 10 种不同的解决方案，但没有任何效果。我知道它与路由器有关，但我不知道为什么它不会滚动。这是我目前使用的代码。

app.component.ts

this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => {
  window.scroll(0, 0);
});

应用程序组件.html

<div class="mainbody bgc-white">
  <router-outlet></router-outlet>
</div>

我已经尝试了几种变体，特别是使用 ElementRef 抓取路由器出口元素并设置 scrollTop = 0，但这也没有效果。还尝试使用 document.body 并没有效果。我在这里缺少什么？

我有一些具有不同 url 前缀的嵌套模块。现在我想在不指定前缀的情况下在一个模块中导航（在我的模块中，我不想知道在哪个前缀下可以访问该模块）。

这些是我的 app.module 的路由：

const APP_ROUTES: Routes = [
    {
        path: '',
        children: [
            { path: '', component: MainComponent },
            { path: 'nested', loadChildren: 'app/nested/nested.module#NestedModule' }
        ]
    }
];

export const routing = RouterModule.forRoot(APP_ROUTES, { useHash: true });

这些是我的nested.module 的路由：

const APP_ROUTES: Routes = [
    {
        path: '',
        component: NestedComponent,
        children: [
            { path: '', component: NestedSubComponent },
            { path: 'sub', component: NestedSubComponent },
            { path: 'sub/:id', component: NestedSubComponent }
        ]
    }
];

export const routing = RouterModule.forChild(APP_ROUTES); …

我需要修改当前路线的数据对象中的面包屑值。这是我的路线配置。

      {
    path: "users",
    component: UserListComponent,
    children: [
      {
        path: ":id",
        component: UserComponent,
        data: {
          breadcrumb: '<User name here>'
        },
       }
    ],
    data: {
      breadcrumb: 'Users'
    }
  },

我正在尝试这样做：

        this._route.data = { breadcrumb: this.user.displayName }; //_route is ActivatedRoute

但它不起作用。任何帮助，将不胜感激。谢谢。

这个我花了一段时间才弄明白，所以我希望通过在 SO 的问答方式中分享解决方案来节省某人的时间。它是这样的：

目标

我有一个 Angular8 Web 应用程序，我使用RouterModule在组件之间导航。

以下是我的路线的定义方式：

const routes: Routes = [
    { path: 'moo', component: AppMooComponent, data: { title: 'Moo Section', desc: 'Moo is the first example component.' } },
    { path: 'boo', component: AppBooComponent, data: { title: 'Boo Section', desc: 'Boo is the second example component.' } },
    { path: 'foo', component: AppFooComponent, data: { title: 'Foo Section', desc: 'Foo is the third example component.' } },
    { path: '', redirectTo: 'moo', pathMatch: 'full' …

我面临的问题是不重新加载相同的组件。谷歌之后我发现我需要在 app-routing-module.ts 文件中添加onsameurlnavigation“reload”，但这也不起作用

下面是我的 app-routing-module.ts 代码

const routes: Routes = [
  { path: 'student', component: StudentDetailsComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes,{onSameUrlNavigation: 'reload'})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

下面是我的路由器链接

<a [routerLink]="['/student']">
  Student
</a>

请帮助我解决同一页面加载问题