小编Jle*_*ham的帖子

好吧，这个问题似乎有很多答案，但我一直无法理解我应该做什么。

我目前有一个子组件，当有人单击另一个子组件中的播放按钮时正在创建该子组件。这是通过与我的父级共享数据的服务发生的，然后父级传递数据并创建我的子音频播放器组件。我遇到的问题是，如果用户导航到另一个页面并单击以在该页面上播放音频，则旧音频仍然存在并且新音频不会启动。

是否有生命周期钩子或方法可以用来销毁旧的音频组件并创建新的音频 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();
  }
}

所以每当用户向前一个输入添加一个值时，我都需要创建一个表单输入。我发现了一些关于如何创建动态表单以及如何观察表单输入以调用函数的好问题，但我不知道如何将两者结合起来并使它们协同工作。

new Vue({
  el: '#form',
  data: {
    items: [],
  },
  methods: {
    addItem() {
      this.items.push({
        value: ''
      });
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id="form">
  <input v-for="item in items" v-model="item.value">
  <button @click="addItem">add</button> {{items}}
</div>

所以目前我可以通过添加一个按钮来添加新输入来完成这项工作，但输入直到你点击按钮后才会显示。我尝试过，v-for="item in items + 1"但这会导致意想不到的疯狂结果，在我考虑之后，我意识到为什么这行不通。我真的很想在加载时有一个输入框，如果用户向该框添加任何值，则会创建一个新的输入框。