html - 重用具有不同输入的 Angular 组件

Question

我遇到了一个奇怪的问题，我不确定从哪里开始调查可能导致它的原因。我目前正在使用一个使用 Three.js 的库 angular-STL-model-viewer。我调用了一个渲染 3D 模型的组件。但是，当我再次调用该组件并添加一个不同的文件时，即使每个组件都分配了一个不同的零件文件，这两个组件都有两个零件。

例如

  <div class="row">
    <stl-model-viewer stlModel="model/teapot"
                      class="col-5"></stl-model-viewer>
    <span class="col-2"></span>
    <stl-model-viewer stlModel="model/other"
                      class="col-5"></stl-model-viewer>
  </div>

2 个不同的组件首先应该是一个茶壶，中间有一个零件

两个组件中两个部分的图像

我觉得组件被引用为一个组件，即使它出现了两次。有没有办法使组件的每次调用都是唯一且独立的？我也知道之前可能有人问过这个问题，但我真的不知道要搜索什么词或短语。对此深感抱歉，感谢您的帮助。

Answer 1

临时修复可能是:-

<stl-model-viewer *ngIf="showModel" stlModel="model/teapot"

例如:- 如果您在方法中更改文件名:-

changeFileName() {
   this.showModel = false;
   //file Name Changing Code Here
   setTimeout(()=>{this.showModel=true});
}

因为您不会很快得到修复。一位用户在 26 天前发布了同样的问题:-

https://github.com/tevim/angular-stl-model-viewer/issues/389#issue-605311429