我整天试图弄清楚如何在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的目的是构建单页应用程序。
RouterModule
的作用是使单页应用程序看起来像几页,即使从技术上讲浏览器始终位于同一页上。
将与“当前页面”相对应的组件放入<router-outlet></router-outlet>
中。
与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>