javascript - 如何初始化一组组件的服务中的属性？

Question

我的服务如下所示:

export class UserService {
  constructor() {}

  coords: Coordinates;

  getPosition() {
    navigator.geolocation.getCurrentPosition(position => {
      this.coords = [position.coords.latitude, position.coords.longitude];
    });
  }
}

我通过调用 getPosition() 方法初始化属性 coords

我有几个组件。所有这些组件都使用此属性。因此，当我实例化任何这些组件时，我想调用 userService.getPosition()。但对于其他组件，该变量应该保持不变。

所有这些组件都是我的 DashboardModule 的一部分，它导入 DashboardRouting。DashboardRouting 如下所示:

const routes: Routes = [
  {
    path: '',
    component: WallComponent,
  },
  {
    path: 'places',
    component: PlacesComponent,
  },
  {
    path: 'object/:id',
    component: ObjectComponent,
  },
  {
    path: '**',
    redirectTo: '',
    pathMatch: 'full',
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class DashboardRoutingModule {
  constructor() {
    console.log('DashboardRoutingModule');
  }
}

如果你仔细观察，路由使用了以下组件:墙组件地点组件对象组件

所有这些组件(页面)都使用 UserService.coords 属性。所以应该对其进行初始化。因此，应该在 ngOnInit() 方法中的每个组件中调用该方法 - 但我想将所有这些组件包装在一个父组件中，这只会初始化 UserService.coords 属性(将调用 UserService.getPosition() 方法)。

我应该如何修改这个？

Answer 1

如果您在全局范围内提供服务，它将是单例，因此任何组件或服务都将访问同一实例，因此它们将看到彼此的更改。但是，如果您在组件中提供服务(请参阅下面的 DashboardWrapperComponent)，它将为该组件及其子组件创建一个新实例，无论是否存在全局提供的实例。在这种情况下，只有子组件才能看到彼此的更改。

所以这应该可以解决另一个组件的要求，变量应该保持不变。

@Component({
    selector: 'app-dashboard-wrapper',
    template: `
        <div>
            <app-child></app-child>
        </div>
    `,
    provide: [
        FancyService,
    ]
})
export class DashboardWrapperComponent {

}

但目前您想要拥有共享服务实例的页面没有共同的父级。这可以通过以下方式实现:

const routes: Routes = [
  {
    path: 'home',
    component: DashboardWrapperComponent,
    children: [
      {
        path: '',
        component: WallComponent,
      },
      {
        path: 'places',
        component: PlacesComponent,
      },
      {
        path: 'object/:id',
        component: ObjectComponent,
      },
    ],
  },
  {
    path: '**',
    redirectTo: 'home',
    pathMatch: 'full',
  },
];

@Component({
    selector: 'app-dashboard-wrapper',
    template: `
        <router-outlet></router-outlet>
    `,
    provide: [
        FancyService,
    ]
})
export class DashboardWrapperComponent {

}

我知道您将 '' 作为根路线，我不确定您是否可以在 2 个级别的路线上使用 ''，例如。两者均适用于 DashboardWrapperComponent 和 WallComponent，因此我在其中添加了 'home'。