当我点击 link 到另一个页面时，我希望我的主页被替换，但相反，另一个页面被添加到我的主页

Question

我正在尝试将第二个页面添加到我的网络应用程序，但第二个页面的 HTML 却添加到了我的主页。为什么？

应用-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OtherPage } from './app.other-page';

const routes: Routes = [
  { path: 'otherpage', component: OtherPage },
];

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

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">

<h1 *ngIf="'test' === str">It's true!</h1>

<a [routerLink]="['/otherpage']">Go to Other Page</a>

<router-outlet></router-outlet>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'angular-test';
}

app.other-page.html

 <h1>This is the other page</h1>

app.other-page.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.other-page.html',
})
export class OtherPage {
  title = 'angular-test';
}

在示例代码中："Go to other page" link 在单击时仍在页面上，而我希望其他页面仅包含 app.other-page.html.

Answer 1

在您的示例中，当您导航到“/otherpage”时，将显示组件 OtherPage 的内容而不是 router-outlet。这意味着 router-outlet 周围的所有内容都将始终显示。将 header 放在 router-outlet 之前是有意义的。

有关更多信息，您可以阅读 angular 路由器文档。 https://angular.io/guide/router

当我点击 link 到另一个页面时，我希望我的主页被替换，但相反，另一个页面被添加到我的主页

I want my homepage to be replaced when I click on a link to another page, but instead, the other page is added to my home

url-routing

angular