Question

大家好，请你帮我解决我的问题我是Angular的新手，所以我尝试了所有可能的解决方案，我甚至删除并重新安装了node_module，退出并再次输入终端类型ng serve和{{1 }}或this.router.navigateByUrl('/user');它不会重定向到我想要的页面，而是重定向到我的主页。

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

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

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

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

我有另外一个代码与work-details.component.ts相同，但我不认为只要属性或元素是唯一的，两个ts组件就不会冲突（如果我错了，请纠正我）。总之生病了，为你提供我的其他成分：

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

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

};

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

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

我希望给你足够的信息来解决我的问题，并且如果输入错误的代码行，请告诉我这些人。

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

我已将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我知道他们路由组件的方式有问题。如果您在我的路由中发现任何缺陷，请告诉我。

我的app-routing.module.ts：

WorksComponent

我还包含了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：

app.module.ts

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

Answer 1

你有两个navigatoin选项

来自HTML

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

来自ts的

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

我认为你正在使用它，我想你在你的路由页面

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

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

Answer 2

试试这个在您的组件中

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

或

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

路由模块中的

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

Answer 3

在html中：

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

在打字稿中：

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

或路由：

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

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

3 个答案: