时间戳

首页 > 解决方案 > domain.com/root/featureA 和 domain.com/root/featureB 之间的路由

angular - domain.com/root/featureA 和 domain.com/root/featureB 之间的路由

问题描述

由于一些技术原因，我有一个基于角度（cli v6）的小型项目，该项目托管在 webhost 根目录下的子目录中（在使用 --base-href 参数时可以正常工作npm run build。）

但是，我在安排支持这一点的路线时遇到了一些困难。' bootstrap: []d 组件加载和运行没有问题。但是，直接输入“featureB”的路径只会产生引导组件（“featureA”）。

在为发布代码而烦恼之前，首先确定这是否只是一个 Angular 不打算/不支持的设计似乎是值得的。我承认我不确定托管网络服务器如何知道/root/*在请求针对“ /root/featureB”时首先在“”中提供 Angular 应用程序，然后呈现特色组件和路由。

为了方便这两条路线，是否必须分别开发和部署这两个功能？

我考虑使用 # 语法（认为系统然后会从路由中获取完整的应用程序，然后可能会根据哈希路径确定要加载的路由/组件）......除了创建一个单独的项目之外，唯一的解决方案是每个？

例如： www.domain.com/root/#featureA 然后是 www.domain.com/root/#featureB （其中完整的角度项目将由/root/请求加载，然后可以加载适当的路线）

编辑 1

使用enableTracing: true，我看到以下内容（这很奇怪，因为它正在识别正确的路线，但没有加载相应的组件）

您可以在此处查看冗长的日志输出

app.module.ts

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

import { AppRoutingModule } from './routing.module';
import { MyService } from './services/my.service';

import { MyUploadComponent } from './my-upload/my-upload.component';
import { MyEditComponent } from './my-editor/my-editor.component';


@NgModule({
  declarations: [
    MyUploadComponent,
    MyEditComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule,
  ],
  providers: [ MyService ],
  bootstrap: [ MyUploadComponent ]
})
export class AppModule { }

路由.module.ts

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

import { MyUploadComponent } from './my-upload/my-upload.component';
import { MyEditComponent } from './my-editor/my-editor.component';


const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'my-upload' },
  { path: 'my-upload', component: MyUploadComponent, },
  { path: 'my-editor', component: MyEditComponent, },
];

@NgModule({
  imports: [ RouterModule.forRoot(routes, { enableTracing: true }) ],
  exports: [ RouterModule ],
  providers: []
})

export class AppRoutingModule { }

编辑 2

<router-outlet>在index.html外壳中使用时， <app-root>（和组件selector）是否仍然需要/使用？我的理解是 router-outlet 是放置路由输出的地方（<app-root>我相信这是标签的目的。）从组件中删除<app-root>和关联selector只会让事情变得更糟。

编辑 3

我在我index.html的测试中尝试了以下内容，但似乎尽管文档声明“充当 Angular 基于当前路由器状态动态填充的占位符”，但不知何故我仍然不完全理解其工作原理/目的（router-outlet尽管有很多教程和视频都使用了它。）

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My App</title>
  <base href="">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <app-root><h1>Loading...</h1></app-root>
  <router-outlet><h1>Routing...</h1></router-outlet>
</body>
</html>

无论输入的网址如何， <h1>Routing...</h1>（h1仅用于提高可见性）仍然存在。

我想也许是，当我直接在浏览器地址栏中输入一个 url 时，它会返回服务器再次请求所有资源（有效地重新加载应用程序，这可以解释为什么它保留在bootstrap'd 组件界面并且永远不会加载了另一个。）但是，情况并非如此（正如我最初预期的那样。）Devtools 显示没有流量/请求。

编辑 4

我发现了这篇文章，它似乎提出了一个更合理的建议（而且似乎也更流行，4/2017）。我将以下内容添加到我的routing.module.ts部分@NgModule...

  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ]

但这并没有改变行为（导致记录相同的跟踪信息。）

编辑 5

复制品

标签： angular

解决方案

答案现在似乎（相对）明显（正如我所担心的;-)）

关键位...

index.html需要（只）简单的<app-root></app-root>部分。

app.module.ts需要一个基本AppComponent的加载为bootstrap'd 组件...

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

import { AppComponent } from './app.component';  // NEW!
import { AppRoutingModule } from './routing';

import { MyUploadComponent } from './my-upload/my-upload.component';
import { MyEditComponent } from './my-edit/my-edit.component';


@NgModule({
  declarations: [
    AppComponent,  // NEW!
    MyUploadComponent,
    MyEditComponent,
  ],
  imports: [
    BrowserModule,  // Common module, ngIf, ngFor, etc
    AppRoutingModule,
  ],
  providers: [ ],
  bootstrap: [ AppComponent ]  // CHANGED!
})
export class AppModule { }

app.component.ts只需要一个指向 root 的基本 shell，<app-root>然后提供一个<router-outlet></router-outlet>将路由输出加载到...

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

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>',
})

export class AppComponent implements OnInit {

  constructor() { }

  ngOnInit() { }
}

（现在）在这里工作。

推荐阅读