Question

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

拜托，有人帮助我，我坚持这个问题。我看到很多与此相关的问题，但没有那么多有用并解决了我的疑问，提前致谢

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' },
])

它的作用是，path:"**"这将考虑所有路径，无论如何   您在网址中输入的内容，用于404页面。
     对于主页网址，
path:"**"应为path:""，请使用path:"**"   为您的404页

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

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

希望这能清除你所有的疑虑。

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

3 个答案: