无法在颤动底板、对话框中使用限定作用域的模型

<template>
  <div class="dialog">
    <!-- 颤动底板内容 -->
  </div>
</template>

<script>
export default {
  name: 'DialogComponent',
  data() {
    return {
      scopedModel: {}
    };
  }
};
</script>

<style scoped>
.dialog {
  /* 样式 */
}
</style>

import { Component, Inject } from '@angular/core';
import { MyModel } from './my-model';

@Component({
  selector: 'app-dialog',
  template: `<div>{{ myModel.data }}</div>`
})
export class DialogComponent {
  constructor(@Inject(MyModel) private myModel: MyModel) {}
}

import React, { useEffect, useState } from 'react';

const DialogComponent = () => {
  const [myModel, setMyModel] = useState(null);

  useEffect(() => {
    // 加载模型
    const model = new MyModel();
    setMyModel(model);

    // 清理函数
    return () => {
      model.dispose();
    };
  }, []);

  return (
    <div>
      {myModel ? <div>{myModel.data}</div> : <div>Loading...</div>}
    </div>
  );
};

export default DialogComponent;

<template>
  <div class="dialog">
    <!-- 颤动底板内容 -->
  </div>
</template>

<style module>
.dialog {
  /* 样式 */
}
</style>