如何在 Angular 中导航(重定向)到我想要的任何页面?

Question

嗨，伙计们，你能帮我解决我的问题吗 我是 Angular 的新手，所以我尝试了所有可能的解决方案，我什至删除并重新安装node_module，退出并再次输入终端类型ng serve并this.router.navigateByUrl('/user');或this.router.navigate(['/works']);它不会重定向到我想要的页面，而是重定向到我的主页。

我在工作细节中的主要问题.html：

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

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

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router} from '@angular/router';
@Component({ 
selector: 'app-work-details',
templateUrl: './work-details.component.html',
styleUrls: ['./work-details.component.css']
})
export class WorkDetailsComponent implements OnInit {
constructor(private route: ActivatedRoute, private router: Router) { }
ngOnInit() {}
goBack () {
this.router.navigate(['/works']);
}
};

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

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

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

我的其他 ts component abt-details.component.ts：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';   
import { Router } from '@angular/router';
@Component({ 
selector: 'app-abt-details',
templateUrl: './abt-details.component.html',
styleUrls: ['./abt-details.component.css']
})
export class AbtDetailsComponent implements OnInit {
constructor(private route: ActivatedRoute, private router: Router) { }
ngOnInit() {
this.route.params.subscribe(res => console.log(res.id));
}
sendMeHome() {
this.router.navigate(['/about']);
}
};

我希望能为您提供足够的信息来解决我的问题，如果键入这篇文章的错误代码行，请道歉，请让我知道伙计们。

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

我已经在app-routing.module.ts道歉中包含了我的所有组件，如果它更令人困惑，我只想让我的页面重定向到我想要的页面。只是请专注于我知道他们在我布线组件的方式上出错WorksComponent。如果您在我的路由中发现任何缺陷，请告诉我。

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

我还包含了app.module.ts文件，以防万一你也想看它。

My app.module.ts：

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

然后再次感谢大家提醒我再次包含路由模块道歉。

Answer 1

试试这个 在您的组件中

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

或

<a routerLink="/home" >HOME</a>

在路由模块中

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

Answer 2

您有两个导航选项

从 HTML

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

从 TS 开始

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

我认为您正在使用它，并且我在您的路由页面中为您提供了

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

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

Answer 3

在 html 中：

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

在打字稿中：

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

或路由：

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