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

Question

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

Sal*_*med 2 javascript routing url-routing webpack angular

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

但是,如果我尝试通过将基本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);

Run Code Online (Sandbox Code Playgroud)

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;
    }
}

Run Code Online (Sandbox Code Playgroud)

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 { }

Run Code Online (Sandbox Code Playgroud)

的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>

Run Code Online (Sandbox Code Playgroud)

所以基本上如果我加载http:// localhost:3000 /然后我显示我的LoginComponent内容,并将url更改为http:// localhost:3000/login.但我如果尝试从开始加载http:// localhost:3000/login比我没有得到任何东西旁边'loading'msg定义了index.html

Answer 1

mic*_*yks 5

1)您可以使用HashLocationStrategy(#) 进行服务器端路由配置.

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

Run Code Online (Sandbox Code Playgroud)

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

2)如果使用pathLocationStrategy(/),则需要服务器端路由配置,否则刷新页面不会带同一页面.

归档时间：	9 年，7 月前
查看次数：	3385 次
最近记录：	7 年，3 月前