好吧,这个问题似乎有很多答案,但我一直无法理解我应该做什么。
我目前有一个子组件,当有人点击另一个子组件的播放按钮时,该子组件就会被创建。这是通过与我的 parent 共享数据的服务发生的,然后 parent 传递数据并创建我的子音频播放器组件。我遇到的问题是,如果用户导航到另一个页面并单击以播放该页面上的音频,旧音频仍然存在并且新音频不会启动。
是否有生命周期 Hook 或方法可用于销毁我的旧音频组件并创建新的音频 onclick?
信息框 - 单击播放按钮时初始激活发生的地方。
export class InfoBoxComponent implements OnInit {
...
activateAudioPlayer(session) {
this.newAudioService.newAudio(session)
}
}
新的音频服务
export class NewAudioService {
newActiveAudioSource: Subject<string> = new Subject<string>();
newAudio(session) {
this.newActiveAudioSource.next(session);
}
newActiveAudio$ = this.newActiveAudioSource.asObservable();
}
前端组件 - 信息框和音频播放器的父组件
@Component({
template: `<audio-player *ngIf='newActiveAudio' [newActiveAudio]='newActiveAudio'></audio-player>`,
})
export class FrontendComponent implements OnInit {
...
ngOnInit() {
this.sub = this.newAudioService.newActiveAudio$.subscribe(
newActiveAudio => {
this.newActiveAudio = newActiveAudio;
});
}
ngOnDestroy() {
// prevent memory leak when component destroyed
this.sub.unsubscribe();
}
}
最佳答案
这是一个小指令,当 key
值改变时重新创建 View :
import {
Directive,
EmbeddedViewRef,
Input,
OnChanges,
SimpleChanges,
TemplateRef,
ViewContainerRef
} from '@angular/core';
@Directive({
selector: '[wRecreateViewKey]'
})
export class RecreateViewDirective implements OnChanges {
@Input('wRecreateViewKey') key: any;
viewRef: EmbeddedViewRef<any>;
constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}
ngOnChanges(changes: SimpleChanges): void {
if (changes.key) {
if (this.viewRef) {
this.destroyView();
}
this.createView();
}
}
private createView() {
this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
}
private destroyView() {
this.viewRef.destroy();
this.viewRef = null;
}
}
使用示例:
<!-- `some-component` will be destroyed and recreated every time `value` changes. -->
<some-component *wRecreateViewKey="value"></some-component>
<!-- Can also be used on regular DOM elements or container -->
<div *wRecreateViewKey="value"></div>
<ng-container *wRecreateViewKey="value"></ng-container>
关于angular - 数据更改时重新创建组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41402798/