我希望當我點擊另一個頁面的鏈接時我的主頁被替換，但另一個頁面被添加到我的主頁

Question

我正在嘗試向我的網絡應用程序添加第二個頁面，但第二個頁面的 HTML 被添加到我的主頁。 為什么？

app-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 { }

應用程序組件.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';
}

在示例代碼中：單擊時“轉到其他頁面”鏈接仍在頁面上，而我寧願其他頁面僅包含app.other-page.html 。

Answer 1

在您的示例中，當您導航到“/otherpage”時，將顯示組件 OtherPage 的內容而不是router-outlet 。 這意味着將始終顯示router-outlet周圍的所有內容。 將 header 放在router-outlet之前是有意義的。

有關更多信息，您可以閱讀 angular router 文檔。 https://angular.io/guide/router