Question

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

welcome.component.html

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

navMenu.component.html

第一次网址= 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>

app.module

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

]),

navMenu.module

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);
    }
}

它只会重新加载，如果我这样做是不好的，因为页面将是空白然后网址将始终是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包含componentsnets选项卡和manu

Answer 1

并不是真的了解你的app结构，但根据这一点，这可能是一个可行的解决方案（？）。您可以不使用router-outlet废弃该内容并使用子项设置父项，而不是欢迎组件，而不是欢迎组件，您的欢迎组件的等效内容将如下所示：

{
    path: 'welcome',
    component: NavComponent
    children: [
      {
        path: 'tab/:id',
        component: TabComponent 
      }
    ]
}

这样，NavComponent和TabComponent之间的通信就可以很好地简化代码：

<div *ngFor="let tab of tabs" (click)="onLinkClick(tab)">{{tab}}</div>

<router-outlet></router-outlet> // tabs gets rendered here

Demo plunker.

<强>更新

如果您希望选择默认选项卡，并确定路径，则可以在路由中设置：

{
    path: 'welcome',
    component: NavComponent
    children: [
      {
        path: '',
        redirectTo: 'tab/Tab1',
        pathMatch: 'full'
      },
      {
        path: 'tab/:id',
        component: TabComponent 
      }
    ]
}

Forked plunker

Answer 2

它没有更新的原因是因为你正在做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 }
])

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

routerlink没有重装组件

2 个答案: