Question

我有两个使用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>;
}

ListComponent 是第一个需要在给定时间点发出声音的组件

@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());
    }
}

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

@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, },
    ]
};

Answer 1

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

将您的声音提取到单独的组件中，将Observable.interval提取到单独的服务中。

在component1和component2（通过*nfIg切换可见度）中使用声音播放组件，并在声音播放组件中使用Observable.interval。

声音播放组件可以接收@Input() contextType参数，告诉它哪个父级正在使用它，因为component1和component2的案例声音应该不同。

[根据您添加的背景更新]

由于声音播放显然对于两个组件都很常见，我会在单独的soundPlayingComponent中提取它，在使用ListComponent和DetailsComponent的父级中使用它并具有这两个人根据将播放的适当声音向父母公开Output() playSound:EventEmitter<whateverParamsYouNeed>。

检测角度组件是否“正在使用”

1 个答案: