Question

我建立了一个共享数据服务，该服务应将下拉选项从1个组件发送到其兄弟姐妹的孙子组件。但我无法正常工作。

共享服务：

@Injectable()
export class LiveDataService {
    private subject: BehaviorSubject<MyData> = new BehaviorSubject<MyData>(null);

    public currentValue(): MyData {
        return this.subject.value;
    }

    public changeValue(data: MyData): void {
        this.subject.next(data);
    }

    public getValue(): Observable<MyData> {
        return this.subject.asObservable();
    }
}

发送组件

@Component({
})
export class MainComponent {
    constructor(private liveDataService: LiveDataService) {}

    onDropdownChange() {
        this.liveDataService.changeValue({id: event.value} as MyData);
    }
}

接收组件

@Component({
})
export class AnotherComponent implements OnInit {

    constructor(private liveDataService: LiveDataService) {}

    ngOnInit() {
        this.liveCutoffData.getValue().subscribe((myData) => {
            this.myData = myData;
            this.doSomething(this.myData);
       });
    }
}

my.module.ts

@NgModule({
    declarations: [
        MainComponent,
        AnotherComponent,
    ],
    imports: [
        ...
    ],
    providers: [
        LiveDataService,
    ],
  })
export class MyModule {
}

从日志中，我可以看到MainComponent正在发送更改。但是，AnotherComponent没有收到这些更改，因此没有任何反应

Answer 1

在服务上将@Injectable()更改为@Injectable({ providedIn: 'root'})，以确保将其注册为带有angular的单例服务。

@Injectable({providedIn: 'root'})
export class LiveDataService {
  // ...

另请参阅Providing a singleton service

与不相关组件之间的服务共享数据不起作用

1 个答案: