如何在Angular中导航（重定向）到我想要的任何页面？

大家好，我是Angular的新手，所以我尝试了所有可能的解决方案，甚至删除并重新安装了node_模块，退出并再次输入终端类型

ng serve

和

this.router.navigateByUrl（'/user'）

或

this.router.navigate（['/works']）它不会重定向到我想要的页面，而是重定向到我的主页

我在work-details.component.html中的主要问题：

<a href="" (click)="goBack()">Go Back</a>

<a href="" (click)="sendMeHome()">Go Back to Home</a>

我有另一个与work-details.component.ts相同的代码，但我认为只要属性或元素是唯一的，两个ts组件就不会冲突（如果我错了，请纠正我）。无论如何，我将向您提供我的其他ts组件：

我的其他ts组件abt-details.component.html：

<a href="" (click)="goBack()">Go Back</a>

<a href="" (click)="sendMeHome()">Go Back to Home</a>

我希望能给你足够的信息来解决我的问题，如果你在这篇文章中输入了错误的代码，请告诉我

对不起，我没有放路由器模块。谢谢大家提醒我，我道歉

我已经在我的
app routing.module.ts中包含了我的所有组件，再次道歉，如果它让我更困惑，我只想让我的页面重定向到我想要的页面。请关注
工作组件
我知道他们的组件布线方式有问题。如果你发现我的路线有任何缺陷，请告诉我

My app-routing.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { AbtDetailsComponent } from './abt-details/abt-details.component';
import { DetailsComponent } from './details/details.component';
import { WorksComponent } from './works/works.component';
import { WorkDetailsComponent } from './works/work-details/work-details.component';
import { WorkDescriptionComponent } from './works/work-details/work-description/work-description.component';

const routes: Routes = [

    {
       path: '',
       component: HomeComponent
    },  
    {
       path: 'about', 
       component: AboutComponent
    },  
    {
       path: 'about/:id', 
       component: DetailsComponent
    },
    {
       path: 'about/details/:id', 
       component: AbtDetailsComponent
    },
    {
       path: 'works', 
       component: WorksComponent
    },
    {
       path: 'works/:id', 
       component: WorkDetailsComponent
    },
    {
       path: 'works/details/:id', 
       component: WorkDescriptionComponent
    }

];

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { routes } from './app.router';

import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { AbtSec01Component } from './about/abt-sec01/abt-sec01.component';
import { HomeComponent } from './home/home.component';
import { NavbarComponent } from './navbar/navbar.component';
import { ErrorComponent } from './error/error.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { MainComponent } from './main/main.component';
import { HomeContentComponent } from './home/home-content/home-content.component';


@NgModule({
  declarations: [
    AppComponent,
    AboutComponent,
    AbtSec01Component,
    HomeComponent,
    NavbarComponent,
    ErrorComponent,
    HeaderComponent,
    FooterComponent,
    MainComponent,
    HomeContentComponent
  ],
  imports: [
    BrowserModule,
    routes
  ],
  providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

我还包括了
app.module.ts
文件，以防您也想看到它

我的app.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { AbtDetailsComponent } from './abt-details/abt-details.component';
import { DetailsComponent } from './details/details.component';
import { WorksComponent } from './works/works.component';
import { WorkDetailsComponent } from './works/work-details/work-details.component';
import { WorkDescriptionComponent } from './works/work-details/work-description/work-description.component';

const routes: Routes = [

    {
       path: '',
       component: HomeComponent
    },  
    {
       path: 'about', 
       component: AboutComponent
    },  
    {
       path: 'about/:id', 
       component: DetailsComponent
    },
    {
       path: 'about/details/:id', 
       component: AbtDetailsComponent
    },
    {
       path: 'works', 
       component: WorksComponent
    },
    {
       path: 'works/:id', 
       component: WorkDetailsComponent
    },
    {
       path: 'works/details/:id', 
       component: WorkDescriptionComponent
    }

];

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { routes } from './app.router';

import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { AbtSec01Component } from './about/abt-sec01/abt-sec01.component';
import { HomeComponent } from './home/home.component';
import { NavbarComponent } from './navbar/navbar.component';
import { ErrorComponent } from './error/error.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { MainComponent } from './main/main.component';
import { HomeContentComponent } from './home/home-content/home-content.component';


@NgModule({
  declarations: [
    AppComponent,
    AboutComponent,
    AbtSec01Component,
    HomeComponent,
    NavbarComponent,
    ErrorComponent,
    HeaderComponent,
    FooterComponent,
    MainComponent,
    HomeContentComponent
  ],
  imports: [
    BrowserModule,
    routes
  ],
  providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

再次感谢大家提醒我再次加入路由模块致歉。
您有两个导航选项

从HTML

<a routerLink="/works" >Works</a>

我想你正在使用它，我在你的路由页面上说你有

{ path: '**', component: HomeComponent }

它会将您重定向到主页。尝试按照我的建议使用它，如果它不起作用，请更新您的问题并添加路由文件
在您的组件中

this.router.navigate(['home']);

或

在html中：

<a routerLink="/works" >Works</a>

或路由：

{ path: 'home', redirectTo: 'YOUR-MAIN.component', pathMatch: 'full' }

你能从你的模块添加路由器配置吗？@user184994谢谢你提醒我，我只添加了app-routing.module.ts和app.module.ts谢谢你提醒我，我只添加了app-routing.module.ts和app.module.ts
this.router.navigate(['works']);

{ path: 'home', redirectTo: 'YOUR-MAIN.component', pathMatch: 'full' }