Angular 组件不会在路由更改时重新加载

Question

我正在学习 angular，在我的项目中我创建的导航栏 routerLink 提供导航到页面。

    <ul>
          <li> <a href="#">Home</a></li>
          <li> <a href="#" [routerLink]="['/about']" >about us</a></li>
          <li> <a href="#" [routerLink]="['/contact']" >contact us</a></li>
    </ul>

这是我的 app.module.ts ，我在其中设置了导航路由器。

 imports: [
    BrowserModule,
    HttpModule,
    RouterModule.forRoot([
       { path:"**", component: HomeComponent,pathMatch: 'full' },
       { path:"about", component: AboutComponent },
       { path:"contact" , component: ContactComponent }
    ])
  ],

所以，当我运行它首先转到主页时，这个运行是完美的，但是当我单击查询字符串路由器中的关于我们页面和联系页面时，它会发生变化，但内容不会发生变化,首页的内容和原来一样，这里是我的主页和关于我们的页面。 this is m home.component.ts

constructor(private _avRoute: ActivatedRoute,
              private _cmsService: CmsService,
              private _router: Router) { }

  ngOnInit() {
     this.getConsultHome();
  }

  getConsultHome(){
     this._cmsService.getcmsConsultHome()
        ._router.params.subscribe(data =>{ this.data = data }
        , error => this.errorMessage = error); 
  }

这是我的 about.component.ts

  constructor(private _avRoute: ActivatedRoute,
              private _cmsService: CmsService,
              private _router: Router) {              
  }

  ngOnInit() {  
    this._cmsService.getcmsConsultAbout()
        .subscribe(data =>{ this.data = data }
        , error => this.errorMessage = error);
  }

拜托，任何人都可以帮助我，我被困在 problem.I 看到了很多与此相关的问题，但没有多大用处并解决了我的查询，在此先感谢

Answer 1

您必须添加 lifefycle-hook ngOnDestory 并取消订阅。您还必须从 'rxjs'

添加订阅

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

export class YourComponent implements OnInit, OnDestroy {

private subscription: Subscription[] = [];

ngOnInit() {
    this.subscription.push(this.customerService.getCustomers().subscribe(customers => {
      this.customers = customers;
    }));
  }

  ngOnDestroy() {
    this.subscription.forEach(sub => {
      sub.unsubscribe();
    });
  }

}

希望对您有所帮助。

官方文档如下： https://angular.io/guide/lifecycle-hooks

Answer 2

问题出在你定义的路由上：

{ path:"**", component: HomeComponent, pathMatch: 'full' }

您将通配符定义为 HomeComponent 的路径，如果您希望每条未定义的路由都指向您的主屏幕，这很好。

但是因为你把它放在你的路由之上，所以无论输入什么，它总是第一个匹配的路由，因此每条路由都指向 HomeComponent。

尝试将顺序更改为：

RouterModule.forRoot([
    { path: 'about', component: AboutComponent },
    { path: 'temp', component: TempComponent },
    { path: '**', component: HomeComponent }
])

这样路由 "about" 和 "temp" 在通配符之前得到匹配。

Answer 3

{ path:"**", component: HomeComponent,pathMatch: 'full' },

把这一行移到最后：

RouterModule.forRoot([
       { path:"about", component: AboutComponent },
       { path:"contact" , component: ContactComponent }
       { path:"**", component: HomeComponent,pathMatch: 'full' },
])

What it does is , path:"**" this will consider all the paths , no matter what you enter in url, it is being used for 404 page.

path:"**" should be path:"" for home page url , use path:"**" for your 404 page

理想情况下，您的路线应如下所示：

RouterModule.forRoot([
       { path:"", component: HomeComponent,pathMatch: 'full' },
       { path:"about", component: AboutComponent },
       { path:"contact" , component: ContactComponent }
       { path:"**", component: ErrorComponent },
])

希望这会消除你所有的疑虑。

Angular 组件不会在路由更改时重新加载

Angular components not reloading on route change

router

angular