Question

我正在创建角度为6的SPA，但遇到了一个奇怪的错误，或者我做错了什么。我有一个主要组件，可以使用它在其中渲染其他组件 <router-outlet>。首次呈现子组件时，从后端获取新数据时，将正确更新其使用的数据模型。

但是，如果我导航到另一条路线，则子组件会更改，然后返回到以前的子组件数据模型不会更新。尽管我可以在控制台和调试脚本中看到更新的数据，但该脚本中存在更新的数据，但是该视图无法检测到更改。

这是我的应用路由的外观：

const appRoutes: Routes = [
  {
    path: 'home', canActivate: [AuthGuard], component: HomeComponent,
    children: [
      {path: 'dashboard', component: DashboardComponent},
      {
        path: 'creator', component: CreatorComponent, children: [
          {path: 'service', component: CreatorServiceComponent},
          { path: 'device', component: CreatorDeviceComponent },
          { path: 'project', component: CreatorProjectComponent },
          { path: 'build', component: CreatorBuildComponent }
        ]
      },
      {path: 'reporter', component: ReporterComponent},
      {
        path: 'overview', children: [
          {path: 'services', component: ServicesComponent},
          {path: 'devices', component: DevicesComponent },
          {path: 'projects', component: ProjectsComponent },
          {path: 'builds', component: BuildsComponent},
          {path: 'testgroups', component: TestGroupsComponent},
          {path: 'tests', component: TestsComponent}
        ]
      },
      {path: 'logger', component: LoggerComponent}
    ]
  },
  {path: 'login', component: LoginComponent},
  {path: 'register', component: RegisterComponent},
  {path: '404', component: NotFoundComponent},
  {path: '', component: HomeComponent},
  // otherwise redirect to 404
  {path: '**', redirectTo: '/404'}
];
export const routing = RouterModule.forRoot(appRoutes)

我的应用程序的入口点是HomeComponent：

<div id="content">
    <div class="outer">
        <app-alert></app-alert>
        <router-outlet>
        </router-outlet>
 </div>

这是导致这些问题的组件。

import {Component, OnDestroy, OnInit} from '@angular/core';
import {LoaderService} from '../../_services/loader.service';
import {ServicesManager} from 
'../overview/services/servicesManager.service';
import {Service} from '../../_models/service.model';
import {HubConnection} from '@aspnet/signalr';
import {AlertService} from '../../_services/alert.service';
import {SignalRHandler} from '../../_services/signalR.service';
import {SignalRClient} from '../../_models/SignalRClient';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
  providers: [ServicesManager]
})
export class DashboardComponent extends SignalRClient implements OnInit {

  services: Service[];
  hubConnection: HubConnection;
  signalRHandler: SignalRHandler;

  constructor(signalRHandler: SignalRHandler,
              private loaderServer: LoaderService,
              private serviceManager: ServicesManager,
              private alertService: AlertService
  ) {
    super(signalRHandler);
    this.signalRHandler = signalRHandler;
  }

  ngOnInit() {
    this.serviceManager.getServiceFromDataBase().subscribe(serviceData => {
      this.services = serviceData;
      console.log(this.services);
    }, error => {
      this.alertService.notify({'type': 'error', 'payload': error.statusText});
    });
  }

  acquireHubInstance() {
    this.hubConnection = this.signalRHandler.hubConnection;
    this.hubConnection.on('BroadcastServiceMessage', (data) => {
      console.log(this.services);
      if (this.serviceExists(data)) {
        const index = this.services.findIndex((service) => {
          return service.apiKey === data.apiKey;
        });
        this.services[index] = data;
      } else {
        this.alertService.notify({'type': 'error', 'payload': 'Couldn\'t match any server to update information'});
      }
    });
  }

  private serviceExists(data) {
    return this.services.find((service) => {
      return service.apiKey === data.apiKey;
    });
  }

}

示例： OnInit上有两个从后端接收到一些信息的对象。然后，通过Web套接字传入有关一个对象的新数据，并将此数据正确分配给现有对象并正确查看更新。然后，我切换到其他组件视图并返回。我回去之后，仍然有两个与初始化期间相同的对象，这是正确的，但是当再次收到来自Web套接字的数据时，不会更新同一对象。看起来Component记得处理WebSockets消息的函数this.hubConnection.on('BroadcastServiceMessage')中的更改对象，因此它不会更新显示组件中全局定义的对象的视图。

角路由器出口问题，型号未更新

0 个答案: