通过替换当前页面重定向到新页面答案

【问题标题】：Redirect to new page by replacing the current page通过替换当前页面重定向到新页面
【发布时间】：2022-01-22 00:12:20
【问题描述】：

我的目标：用户在欢迎页面（应用程序组件 html）中，当点击按钮时，他应该能够转到另一个 html 页面。我检查了教程并知道我应该使用路由来执行此操作，但是无论我做什么，我都无法使用以下代码来完成这个简单的事情，我单击按钮 url 更改但我看不到 hizmetlerimiz 的内部内容 html文件：

应用组件 Html 文件：

<app-header></app-header>
<button routerLink="/hizmetlerimiz">click me</button>
<app-footer></app-footer>

App-routing-module.ts 文件：

const routes: Routes = [
  {
    path: 'hizmetlerimiz',
    component: HizmetlerimizComponent,
  },
  {
    path: '',
    component: AppComponent,
  }
];

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

Hizmetlerimiz 组件：

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

@Component({
  selector: 'hizmetlerimiz',
  templateUrl: './hizmetlerimiz.component.html',
  styleUrls: ['./hizmetlerimiz.component.css']
})

export class HizmetlerimizComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Hitmetlerimiz 组件 Html 文件

<h5>hizmetlerimiz</h5>
<p>some hizmets</p>

【问题讨论】：

试试 [routerLink]="['/hizmetlerimiz']"
这样做不会导航到新页面，而是将 hizmetlerimiz 页面的内容添加到当前页面的底部

标签： angular angular-ui-router angular-routing angular-router angular-routerlink

【解决方案1】：

您需要使用<router-outlet></router-outlet>。这个标签是html内容的占位符，填充的是当前路由所附的组件

所以它应该看起来像这样：

<app-header></app-header>
<router-outlet></router-outlet>
<button routerLink="/hizmetlerimiz">click me</button>
<app-footer></app-footer>

【讨论】：

嗨，当我这样做时，我看到单击按钮时，只有 hizmetlerimiz 的 html 页面附加到底部，但没有作为新的 html 页面打开
@AhmetEroğlu “新的 html 页面”到底是什么意思？
位于 /hizmetlerimiz 组件内的所有内容都将进入标签内。如果您希望更改所有页面，您可以为主页创建一个组件并将其路由解析为/
这对我来说没有点击。我已经使用路径“hizmetler”为 hizmetler 页面创建了一条路由，所以当我在应用程序组件页面（入口点）中时，为什么它没有重定向到 hizmetler 页面的 html 文件，而只是附加它的内部 html
这就是单页应用程序的要点 - 您不会将用户重定向到新页面或重新创建页面，而是更改给定页面的 innerHTML。