时间戳

首页 > 解决方案 > 如何在 Angular 中导航（重定向）到我想要的任何页面？

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

问题描述

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

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

我的 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我的文件，以防你也想看到它。

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

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

标签： angulartypescript

解决方案

您有两个导航选项

来自 HTML

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

来自 ts

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

我认为你正在使用它，我猜你的路由页面中有

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

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

推荐阅读