导航到组件 Angular 9答案

【问题标题】：Navigate to a component Angular 9导航到组件 Angular 9
【发布时间】：2020-05-09 20:41:41
【问题描述】：

我整天都在试图弄清楚如何在 Angular 9 中加载一个新页面，比如当你点击时，你会看到你被重定向到一个新页面。我看过以下相关链接，但都没有解决我的问题：

我已经成功实现了一个不需要的行为，其中组件被加载到同一页面而不是新页面上。

这是我的app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { CreateQueueComponent } from './create-queue/create-queue.component';
import { SubscribeQueueComponent } from './subscribe-queue/subscribe-queue.component';
import { AppRoutingModule } from './app-routing.module';
import { ManageQueueComponent } from './manage-queue/manage-queue.component';

@NgModule({
  declarations: [
    AppComponent,
    CreateQueueComponent,
    SubscribeQueueComponent,
    ManageQueueComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CommonModule } from '@angular/common';
import { CreateQueueComponent } from './create-queue/create-queue.component';
import { ManageQueueComponent } from './manage-queue/manage-queue.component';
import { SubscribeQueueComponent } from './subscribe-queue/subscribe-queue.component';


const routes: Routes = [
  { path: 'createQueue', component: CreateQueueComponent },
  { path: 'manageQueue', component: ManageQueueComponent },
  { path: 'subscribeQueue', component: SubscribeQueueComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

正如文档所暗示的，我已经确定在我的index.html 中我有<base href="/">

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

这是我的app.component.html

...
<a class="circle-link option-card" title="Join" routerLink="/subscribeQueue">
   <i class="fas fa-calendar"></i>
   <span>Subscribe</span>
</a>
...

我的<router-outlet> 附加在app.component.html 的末尾。那么问题来了，如何将网页的内容或部分内容替换为目标组件上的内容？

有人知道发生了什么吗？我在这里遗漏了什么吗？

谢谢。

【问题讨论】：

您能否将包含<router-outlet> 的代码包含在内？
我已经更新了我的问题@RMo

标签： angular

【解决方案1】：

与router.module.ts 文件中的路由相关的组件将始终显示在<router-outlet> 中。

更改整个页面

下面的代码将使用路由器加载一个组件作为整个页面。

app.component.html

<router-outlet></router-outlet>

使用路由器更改部分页面

下面的代码将始终加载 <h1>Always header</h1> 并另外加载 <router-outlet></router-outlet> 中要路由到的组件。

您的router.module.ts 中不存在您的基本路径''，因此路由器不会在主页上的<router-outlet></router-outlet> 中加载任何内容，因为它没有绑定任何组件。

我希望这就是你所做的。但是我不能确定，因为你没有提供那部分代码。

app.component.html

<h1>Always header</h1>
<router-outlet></router-outlet>

【讨论】：

【解决方案2】：

Angular 的目的是构建单页应用程序。

RouterModule 的作用是使您的单页应用程序看起来像多个页面，即使从技术上讲浏览器总是在同一个页面上。

它会将“当前页面”对应的组件放入：<router-outlet></router-outlet>。

【讨论】：

这就是我所做的。现在的问题是如何用新页面替换实际页面的内容？