Angular 5页面跳转至自定义组件异常问题求助

嘿，我来帮你搞定这个Angular路由跳转的问题！你遇到的这个“短暂进入目标页面又立刻弹回来”的情况，核心原因是原生<a>标签的默认行为和Angular的路由逻辑撞车了。

你用的<a href="">会触发浏览器的默认跳转动作——这里href=""相当于让页面刷新/回到当前路由，而你的sendMeHome()方法虽然触发了路由跳转，但紧接着浏览器的默认行为又把页面拉回了当前状态，所以才会出现这种闪一下的现象。

给你两种靠谱的解决办法：

方法一：阻止原生a标签的默认行为 #

直接在点击事件里加上$event.preventDefault()，把模板代码改成这样：

<p> This is what I'm all about. 
  <a href="" (click)="sendMeHome(); $event.preventDefault()">
    <strong>Take me back</strong>
  </a>
</p>

这样就能切断浏览器的默认跳转逻辑，让Angular的路由正常生效。

方法二：用Angular官方推荐的routerLink（更规范） #

这是Angular路由的标准用法，完全不需要处理原生事件，代码更简洁。

首先确保你已经在app-routing.module.ts里正确注册了目标组件的路由：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BelizeLocalTimeComponent } from './path-to-your-component/belize-local-time.component';

const routes: Routes = [
  // 其他已有的路由...
  { path: 'belize-local-time', component: BelizeLocalTimeComponent }
];

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

然后把模板里的a标签改成用routerLink：

<p> This is what I'm all about. 
  <a routerLink="/belize-local-time">
    <strong>Take me back</strong>
  </a>
</p>

这种方式完全符合Angular的最佳实践，还能避免各种原生事件的冲突问题。

另外别忘了检查一下你的sendMeHome()方法（如果用方法一的话）里的路由跳转代码是否正确，应该是这样的：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-welcome-component',
  templateUrl: './welcome-component.component.html',
  styleUrls: ['./welcome-component.component.css']
})
export class WelcomeComponentComponent {
  constructor(private router: Router) {}

  sendMeHome() {
    // 这里的路径要和路由配置里的path一致
    this.router.navigate(['/belize-local-time']);
  }
}

内容的提问来源于stack exchange，提问作者Sue-May Xu