角度组件不会在路由更改时重新加载答案

【问题标题】：Angular components not reloading on route change角度组件不会在路由更改时重新加载
【发布时间】：2018-01-16 07:00:09
【问题描述】：

我正在学习角度，在我的项目中，我创建了 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);
  }

请任何人帮助我，我被困在这个问题上。我看到了很多与此相关的问题，但没有那么有用并解决我的问题，提前致谢

【问题讨论】：

添加代码而不是截图。
@Aravind，好的。我做到了，请再检查一次
控制台有错误吗？
@AkashAgrawal no

标签： angular router

【解决方案1】：

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

将此行移到最后：

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

它的作用是，path:"**" 这将考虑所有路径，不管你在url中输入的内容，它被用于404页面。

path:"**" 应该是 path:"" 作为主页 url ，使用 path:"**" 为您的 404 页面

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

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

希望这能消除您的所有疑虑。

【讨论】：

@BrijeshMavani，很高兴知道，快乐的编码兄弟:)
从过去 2 天开始，我被困在问题上，终于解决了，再次感谢您，也堆栈溢出
@BrijeshMavani，它发生了 :)
你是救生员！

【解决方案2】：

您必须添加 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

【讨论】：

【解决方案3】：

问题在于您定义的路线：

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

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

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

尝试将顺序更改为：

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

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

【讨论】：