Question

使用Angular，有没有办法使用共享服务在兄弟组件之间共享数据，其中共享服务不是单例？

我能想到的唯一方法就是注入 singleton 服务，然后在该单例服务中使用hashmap来引用其他类实例。

@Component({
  templateUrl: './sibling.component.html',
  styleUrls: ['./sibling.component.scss'],
})

export class Sibling1Component implements OnInit {

  displayMode: string = 'default';
  foo: Foo;


  constructor(private s: SharedSingletonService) {

    // I need to pass an id, but how
    this.foo = s.getInstanceOfFoo('some-uuid');

  }

  ngOnInit() {
  }

}

//其他兄弟

@Component({
  templateUrl: './sibling.component.html',
  styleUrls: ['./sibling.component.scss'],
})

export class Sibling2Component implements OnInit {

  displayMode: string = 'default';
  foo: Foo;


  constructor(private s: SharedSingletonService) {

     // I need to pass an id, but how
     this.foo = s.getInstanceOfFoo('the-same-uuid-as-above');

  }

   ngOnInit() {
   }

}

//助手类

export class Foo {

}

//共享单件服务

@Injectable()
export class SharedSingletonService {

  foos : <{[key:string]:Foo}> = {}

  constructor(){

  }

  getInstanceOfFoo(id){
    if(this.foos[id]){
       return this.foos[id];
     }

    return this.foos[id] = new Foo();
  }

}

所以主要的问题是 - 如何在兄弟组件实例中使用相同的id，以便我可以在共享服务中查找相同的foo实例？

Answer 1

如果您的动机只是为了分享服务的身份......
创建另一项服务，

import * as uuid from 'uuid';

@Injectable()
export class IdSharerService {

 id: string;

 constructor(){
     id = uuid.v4();
 }
}

在两个组件中使用它

constructor(private idSvc IdSharerService, private sharedSvc: SharedSingletonService )
{       
   this.foo = s.getInstanceOfFoo(idSvc.id);
}

希望这会有所帮助。您可以使用此NPM包生成uuid： https://www.npmjs.com/package/uuid

使用非单一服务在兄弟组件之间共享数据

1 个答案: