导航到组件Angular 9

问题描述 投票:0回答:2

我整天试图弄清楚如何在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/[email protected]/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的末尾。所以问题是,如何用目标组件上的内容替换Web的内容或部分内容?

有人知道发生了什么吗?我在这里想念什么吗?

谢谢。

angular
2个回答
0
投票

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

RouterModule的作用是使单页应用程序看起来像几页,即使从技术上讲浏览器始终位于同一页上。

将与“当前页面”相对应的组件放入<router-outlet></router-outlet>中。


0
投票

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>
© www.soinside.com 2019 - 2024. All rights reserved.