Question

我试图将第二个页面添加到我的Web应用程序，但是，第二个页面的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 { }

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';
}

在示例代码中：单击该页面时，“转到其他页面”链接仍在页面上，而我希望其他页面仅包含app.other-page.html。

Answer 1

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

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

当我单击指向另一个页面的链接时，我希望替换掉我的主页，但是，另一个页面被添加到了我的主页

1 个答案: