Angular 4 Routing不适用于实时网络应用程序

发布时间：2020-12-17 06:55:00 所属栏目：安全来源：网络整理

导读：我的Angular 4网络应用程序路由在我的开发环境中运行良好,菜单重定向在实时版本上工作正常. 但是,dev版本通过在浏览器的地址字段中键入来重定向到不同的页面,但实时版本不会.这是一个角度问题吗？或者我是否需要使用ISP管理重定向？我的app.router.ts代码如

我的Angular 4网络应用程序路由在我的开发环境中运行良好,菜单重定向在实时版本上工作正常.

但是,dev版本通过在浏览器的地址字段中键入来重定向到不同的页面,但实时版本不会.这是一个角度问题吗？或者我是否需要使用ISP管理重定向？

我的app.router.ts代码如下：

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

import { HomeComponent } from './home/home.component';
import { ArtComponent } from './art/art.component';
import { MusicComponent } from './music/music.component';
import { EventsComponent } from './events/events.component';

export const router: Routes = [
{ path: '',redirectTo: 'home',pathMatch: 'full'},{ path: 'home',component: HomeComponent },{ path: 'art',component: ArtComponent },{ path: 'music',component: MusicComponent },{ path: 'events',component: EventsComponent }
];

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

在app.module.ts我有：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule,} from '@angular/core';
import { RouterModule } from '@angular/router';
import { router } from './app.router';

import 'hammerjs';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { MdInputModule,MdButtonModule,MdToolbarModule,MdMenuModule,MdGridListModule,MaterialModule,MdDatepickerModule,MdNativeDateModule } from '@angular/material';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { MfToolbarComponent } from './mf-toolbar/mf-toolbar.component';
import { MfMenuComponent } from './mf-menu/mf-menu.component';
import { SplashComponent } from './splash/splash.component';
import { ArtComponent } from './art/art.component';
import { MusicComponent } from './music/music.component';
import { EventsComponent } from './events/events.component';
import { HomeComponent } from './home/home.component';
import { ImageSliderComponent } from './image-slider/image-slider.component';

// import { HTTPTestService } from './date-data.service';
import { AuthenticationService } from './authentication-service.service';

import { DataService } from './data.service';
import { SvgViewerComponent } from './svg-viewer/svg-viewer.component';
import { CalendarComponent } from './calendar/calendar.component';

@NgModule({
  declarations: [
    AppComponent,MfToolbarComponent,MfMenuComponent,SplashComponent,ArtComponent,MusicComponent,EventsComponent,HomeComponent,ImageSliderComponent,SvgViewerComponent,CalendarComponent
  ],imports: [
    BrowserModule,BrowserAnimationsModule,FormsModule,MdInputModule,MdNativeDateModule,HttpModule,RouterModule.forRoot( router ),],providers: [
    // [HTTPTestService],[AuthenticationService],[DataService],bootstrap: [AppComponent]
})
export class AppModule { }

我不明白forRoot在做什么,或者在Angular 4中使用它是否合适？

我的app.component.html如下,并使用隐藏的路由器插座：

<body>
<app-mf-toolbar></app-mf-toolbar>
<router-outlet class="hidden-router"></router-outlet>
</body>

这是我的实时网络应用程序无法再现的隐藏路由器行为,我该如何更改？

我在menu.component.html中也有一个使用路由器链接的菜单,这很好用：

<div class="container">
    <md-menu #appMenu="mdMenu">
        <a routerLink="home">
            <button md-menu-item>
                <md-icon class="material-icons"> home </md-icon>
                <span> Home </span>
            </button>
        </a>
        <a routerLink="art">
            <button md-menu-item>
                <md-icon class="material-icons"> format_paint </md-icon>
                <span> Art </span>
            </button>
        </a>
        <a routerLink="music">
            <button md-menu-item>
                <md-icon class="material-icons"> music_note </md-icon>
                <span> Music </span>
            </button>
        </a>
        <a routerLink="events">
            <button md-menu-item>
                <md-icon class="material-icons"> event_note </md-icon>
                <span> Events </span>
            </button>
        </a>
    </md-menu>

    <button md-icon-button [mdMenuTriggerFor]="appMenu" color="secondary">
       <i class="material-icons">menu</i>
    </button>
</div>

解决方法

您在这里遇到的问题与单页应用程序框架的性质有关,例如Angular.

在部署的应用程序版本上,托管它的Web服务器只知道如何提供它看到的一个html文件(index.html),它对应于您的根路径.例如,您尝试直接访问http://url-to-your-app/art,服务器将抛出404未找到,因为它不会将其识别为可以服务的资源的路径.

从应用程序本身浏览应用程序时,它是Angular的路由服务,用于管理客户端的导航;主机Web服务器实际上不会收到服务其他网页的请求,而不是index.html.
此外,这不会发生在开发人员身上,因为您的开发人员服务器知道如何管理它.

您有两种选择：

>将生产Web服务器配置为始终响应
index.html只要它检测到404 – 这样,Angular将始终加载,其路由服务将处理客户端的导航.
>如上所述,将应用程序的locationStrategy更改为Hash位置策略
here.但是,这会改变您应用的网址,而不是那样在我看来是可取的.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!