导航到路由并刷新 Angular 6 - Javascript

在Angular 6中，导航到不同的路由并重新加载组件是一个非常普遍的任务。本文将介绍如何在Angular 6中使用路由模块导航到不同的路由并刷新组件。

1. 引入路由模块

在你的Angular应用中，你需要先引入路由模块。打开你的 app.module.ts 文件并在其中进行引入。

// app.module.ts

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

// your components 
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'about', component: AboutComponent }
];

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

我们在这里定义了两个组件，HomeComponent 和 AboutComponent。我们定义了路由表，将 path 与相应的组件匹配。在这里，我们还将空的路径重定向到/home路径。

2. 在组件中进行导航

现在我们已经将路由模块添加到我们的应用中，并设置了路由表，接下来我们需要在组件中进行导航。

让我们假设我们有一个按钮并希望在按钮单击时导航到 AboutComponent。在此示例中，我们将导航链接添加到 HomeComponent。

<!-- home.component.html -->

<button (click)="navigateToAbout()">Go to About</button>

// home.component.ts

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
  }

  navigateToAbout() {
    this.router.navigateByUrl('/about', {skipLocationChange: true}).then(()=>
      this.router.navigate(["/about"]));
  }

}

在 HomeComponent 中，我们注入了Router。现在，当我们单击按钮时，navigateToAbout() 方法将路由导航到 AboutComponent。注意 skipLocationChange 的配置可以方便地跳过路由历史记录。

3. 条件判断是否刷新组件

现在，我们导航到 AboutComponent 并重新加载它，但有时候我们可能只想在某些条件下才重新加载组件。

为了解决这个问题，我们可以在路由器中传递一些数据，并根据这些数据来决定是否要重新加载组件。

下面是一个例子：

// home.component.ts

  navigateToAbout() {
    const navigationExtras = {
      queryParams: {
        refresh: true // set refresh at the query params
      },
      skipLocationChange: true
    };
    this.router.navigate(['/about'], navigationExtras);
  }

这里我们将 refresh 参数添加到查询参数中。现在让我们在 AboutComponent 中通过 ActivatedRoute 获取该参数。

// about.component.ts

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

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {

  private refresh = false;

  constructor(private route: ActivatedRoute,
              private router: Router) { }

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.refresh = params['refresh'] || false;
    });
  }

  refreshComponent() {
    // do something to refresh the component
  }

  navigateToHome() {
    this.router.navigateByUrl('/home');
  }

}

在 AboutComponent 中，我们订阅了 ActivatedRoute 中的查询参数，并将refresh 参数的值存储在本地变量 refresh 中。

在 refreshComponent() 函数中可以根据 refresh 变量的值来决定是否重新加载组件内容。

在 navigateToHome() 函数中我们导航回 HomeComponent。

总结

以上是在Angular 6中导航到路由并刷新组件的简单方法。希望这篇文章能对您有所帮助，并提高您的Angular开发技能。