Question

当尝试通过输入特定组件的url路径加载特定组件时，应用程序不会加载组件。它只显示加载消息，我没有在控制台中提到任何错误。

但是如果我尝试通过将基本网址重定向到路径来加载相同的组件，那么一切正常并重定向。

我不知道造成这种奇怪行为的原因。我使用webpack2作为我的捆绑包。

这是我的代码：

app.routes.ts

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

import { LoginComponent } from './login/login.component';

const routes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: '', redirectTo: '/processor', pathMatch: 'full' },
];

export const appRoutingProviders: any[] = [

];

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

app.component.ts

import { Component, ViewContainerRef, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  template: `
        <router-outlet></router-outlet>
  `
})
export class AppComponent {
    private viewContainerRef: ViewContainerRef;
    public constructor(viewContainerRef: ViewContainerRef) {
        this.viewContainerRef = viewContainerRef;
    }
}

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule }    from '@angular/http';

import { routing, appRoutingProviders } from './app.routes';

import { AppComponent }   from './app.component';
import { LoginComponent } from './login/login.component';

@NgModule({
  imports: [
      BrowserModule, FormsModule, HttpModule, routing
   ],
  declarations: [
      AppComponent, LoginComponent
   ],
  providers: [ appRoutingProviders ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

的index.html

<html>
    <head>
        <meta charset=UTF-8>
        <title>Hello World</title>
        <link rel="icon" href="data:;base64,iVBORw0KGgo=">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
        <link href="global.css" rel="stylesheet">
        <base href="/">
    </head>
    <body>
        <app>
            Loading ...
        </app>
    </body>
</html>

所以基本上如果我加载http://localhost:3000/，那么我会显示我的LoginComponent内容，并且url更改为http://localhost:3000/login。但是如果我从头开始尝试加载http://localhost:3000/login，那么除了'loading'之外没有任何东西，msg定义了index.html

Answer 1

1）您可以使用 HashLocationStrategy（＃），因为不需要服务器端路由配置。

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(routes, { useHash: true })  //<<<===here
  ],
   ...
})

现在，如果您刷新，您将能够看到同一页面。

2）如果您使用 pathLocationStrategy（/），则需要服务器端路由配置，否则刷新页面将不会带来相同的页。

angular2在进入url路径时未加载组件

1 个答案: