Angular 检测角度分量是否为；“正在使用”；

我有两个角度组件，它们使用Observable.interval在后台运行代码。当给定事件发生时，每个组件都应播放声音，但只有当前“可见”的组件才应实际播放声音。组件将基于当前管线“可见”

现在的情况是，两个组件都播放声音，而且声音已损坏。我的想法是，我应该检测一个组件是否“可见”，而不是在这种情况下为该组件播放声音

是否有一种方法可以检测组件是否正在使用，或者是否有另一种方法可以处理此要求以播放声音

代码，我已经修剪了不相关的代码以保留空间

ViewUpdateService提供组件订阅的可观察对象

@Injectable()
export class ViewUpdateService {
    constructor(@Inject(PLATFORM_ID) private platformId: Object) {
        this.notifier = isPlatformBrowser(this.platformId)
            ? Observable.interval(250)
            : Observable.empty(); 
    }

    notifier: Observable<any>;
}

DetailComponent是需要在不同时间点发出声音的第二个组件

@Component()
export class ListComponent implements OnInit {
    private soundHandler(): void {
        if(!this.triggerEventOccurred)
            return;

        if(this.shouldPlaySoundIfVisible)
            this.kerching.play();
    }
    // ... removed to preserve space ...

    constructor(private viewUpdateService: ViewUpdateService) {}

    ngOnInit(): void {
        this.dataService.getList()
            .subscribe(l => this.handle(l));

        this.viewUpdateService.notifier
                              .subscribe(t => this.soundHandler());
    }
}

@Component()
export class DetailComponent implements OnInit {
    private soundHandler(): void {
        if(!this.triggerEventOccurred)
            return;

        if(this.shouldPlaySoundIfVisible)
            this.kerching.play();
    }
    // ... removed to preserve space ...

    constructor(private route: ActivatedRoute,
                private viewUpdateService: ViewUpdateService) {}

    ngOnInit(): void {
        this.route.paramMap
            .switchMap((params: ParamMap) => {
                const id = params.get('id');

                if(!id)
                    return Observable.empty();

                return this.dataService.get();
            })
            .subscribe(s => this.handle(s));       

        this.viewUpdateService.notifier
                              .subscribe(t => this.soundHandler());
    }
}

使用角度布线使零部件可见

export const DrawRoute: Route = {
    path: 'draw', 
    children: [
        { path: ':id', component: DetailComponent, },
        { path: '', component: ListComponent, },
    ]
};

---

非常抽象，因为您没有提供太多细节

将播放的声音提取到单独的组件中，将

可观察到的声音提取到单独的服务中

在
组件1
和
组件2
中使用您的声音播放组件（其中您可以通过
*nfIg
切换可见性），并在声音播放组件中使用您的
可观察的.interval

声音播放组件可能会接收到
@Input（）contextType
参数，告诉它哪个父级正在使用它进行案例播放
组件1
和
组件2
的声音应该不同

[根据添加的上下文进行更新]

由于声音播放显然是两个组件的共同点，我将在单独的
soundPlayingComponent
中提取它，在使用
ListComponent
和
DetailsComponent
的父级中使用它，并让这两个组件公开
输出（）playSound:EventEmitter
根据播放的声音向家长发送。
您对“正在使用”的定义是什么？组件是否在DOM中创建和安装？您是否取消/取消订阅您的observable？另外，请在您的问题中包含相关代码，最好是以最小可复制片段的形式。抱歉，是晚上11点以后，brain开始睡眠；-）我会提供更多细节