angular - routerlink 不重新加载组件

Question

我的 welcome.component 包含菜单和选项卡，一旦我点击菜单项 routerlink 没有发起新的请求，因此，选项卡组件没有重新加载。标签组件被多个路由链接调用，每次都应该重新加载。

welcome.component.html

<nav-menu></nav-menu>
<tab><tab>

navMenu.component.html

第一次 url = http://localhost:xxxx/welcome

一旦我点击 navMenu.component.html 中的项目，url 就会更改为 http://localhost:53620/tab/2

但是，tab.component 需要触发 ngOnInt 来重新加载 id 2 的数据。

  <ul class="list-unstyled list" *ngFor='let menu of menues'>

      <li><a [routerLink]="['/tab',menu.LinkTabID]" class="anchorLink"><i class="icon-home scolor" ></i><font color="white">{{menu.Name}}</font></a></li>

  </ul>

tab.component.html

  <div class="row  left" *ngFor='let control of tabControls; let i = index' style="padding-bottom:3px">
      <div class="col-lg-2 text-left" style="border:0px dotted">
           {{control.DropDownTitle}}:
      </div>
      <div class="col-lg-pull-3 text-left">
          <select name="{{control.DropDownTitle}}" [(ngModel)]="selected[i]" style="width:80%" required>
             <option value="" selected>Select</option>
             <option *ngFor='let controlList of control.DropdownValues' [ngValue]="controlList.Value">
                  {{controlList.Value}}
              </option>
          </select>

      </div>
</div>

应用程序模块

RouterModule.forRoot([
     { path: 'welcome', component: WelcomeComponent},
     { path: '', redirectTo: 'welcome', pathMatch: 'full' },
     { path: '**', redirectTo: 'welcome', pathMatch: 'full' }

]),

导航菜单模块

imports: [BrowserModule,
    RouterModule.forChild([
        { path: 'tab/:id', component: WelcomeComponent}//,
    ]),
],
declarations: [NavMenuComponent],
providers: [NavMenuService],
exports: [NavMenuComponent]

tab.component

ngOnInit(): void {
   this.linkTabID = +this._rout.snapshot.params['id']
   if (isNaN(this.linkTabID))
   {
       this._appParams.GetDefaultTab(this.linkID, this.psnlUID)
           .subscribe( data => {
                this.linkTabID = data.result.LinkTabID;

                this.GetControls(data.result.LinkTabID);
            },
            error => this.errorMessage = <any>error);
    }
    else
    {
       this.GetControls(this.linkTabID);
    }
}

如果我这样做，它只会重新加载，这不好，因为页面将是空白，然后 url 将始终是 locLHOSTxxx/welcome，没有我用来重新加载数据的 id

<ul class="list-unstyled list" *ngFor='let menu of menues'>

     <li><a (click)="onLinkClick"('/tab',menu.LinkTabID)" class="anchorLink"><i class="icon-home scolor" ></i><font color="white">{{menu.Name}}</font></a></li>

</ul>

navMenu.component

onLinkClick(routeValue: string, tabID: string) {
    this._router.navigate(['/tab', { id: tabID }]);
}

*****************更新***************************** **********************

我去掉了 navMenu.module 和 tab.module 并将它们全部合并到 app.module 中

   RouterModule.forRoot([
            { path: 'welcome', component: WelcomeComponent },
            { path: 'tab/:id', component: WelcomeComponent },
            { path: '', redirectTo: 'welcome', pathMatch: 'full' },
            { path: '**', redirectTo: 'welcome', pathMatch: 'full' }

        ]),

如果我这样做

    { path: 'tab/:id', component: TabComponent }

,这行不通，因为我会丢失我的菜单项。 WelcomeComponent 包含组件选项卡和手册

Answer 1

它不更新的原因是因为您正在执行 this._rout.snapshot.params['id']。您不应该获取快照，而应该订阅激活的路由，如下所示:

this._rout.params.subscribe( params => 
{
   this.linkTabID = params["id"];
   // your code continues here
});

您可能还缺少选项卡组件的默认路由。如果您创建一个选项卡组件，那么您将能够执行如下操作:

RouterModule.forChild([
   { path: 'tabs', component: tabsComponent},
   { path: 'tab/:id', component: LocationComponent }
])

有关 child 路线的更多详细信息，请查看 this Angular 2 doc 中的里程碑 3:英雄功能部分。获取更多信息。