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

Posted 2023-02-19

【中文标题】通过替换当前页面重定向到新页面

【英文标题】：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 页面的内容添加到当前页面的底部

【参考方案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。