Question

这是我的模块代码。所以我的应用程序是这样的：登录（按按钮转到仪表板） - ＆gt;仪表板（按链接转到子组件） - ＆gt;在线/离线组件。

它们都在同一页面上。

我用它来导航它们的方式：

this.router.navigate(['/dashboard']

routerLink= '/dashboard/online

routerLink= '/dashboard/offline

app.module.ts

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        JsonpModule,
        RouterModule.forRoot([
        {
            path: 'login',
            component: LoginComponent

        },{
            path: 'dashboard',
            component: DashboardComponent,
            children: [
                {
                    path: 'online',
                    component: OnlineComponent
                },{
                    path: 'offline',
                    component: OfflineComponent
                },{
                    path: '',
                    redirectTo: 'online',
                    pathMatch: 'full'

                }
            ]
        },{
            path: '',
            redirectTo: '/login',
            pathMatch: 'full'
        }
        ])
    ],

它适用于路由。但是如果我在url栏显示localhost：3000 / dashboard / online时刷新了页面。刷新后页面不会加载。控制台显示此类错误：

error at GET http://localhost:3000/dashboard/node_modules/core-js/client/shim.min.js 
error at GET http://localhost:3000/dashboard/node_modules/zone.js/dist/zone.js 
error at GET
http://localhost:3000/dashboard/node_modules/reflect-metadata/Reflect.js 
error at GET http://localhost:3000/dashboard/node_modules/systemjs/dist/system.src.js 
Uncaught ReferenceError, system is not defined.

我认为这与我设置子组件的方式有关，或者我可能需要在Dashboard组件中添加基本href，因为它有子组件。

请帮我解决这个问题。

谢谢。

Answer 1

这可能与后退/前进箭头和刷新相关的角度路由器问题有关。我有一个非常类似的问题。

我不知道是否会这样做，但是在你的app.module中尝试这个，它会将位置的策略切换回好的旧标签事物（所以网址看起来像http://foo/#/bar只是http://foo/bar）。一旦我这样做，所有刷新和前进/后退导航问题都消失了（例如，如果我从我的网站转到www.amazon.com然后点击后箭头，服务器会响应大量的“未找到”和等等）：

// other imports
import { LocationStrategy, HashLocationStrategy } from '@angular/common';

@NgModule({
  declarations: [ ... ],
  imports: [ ... ],
  providers: [ 
     {provide: LocationStrategy, useClass: HashLocationStrategy} 
   ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

刷新子组件Angular2

1 个答案: