重用具有不同输入的 Angular 组件答案

【问题标题】：Reusing Angular component with different input重用具有不同输入的 Angular 组件
【发布时间】：2020-09-05 10:47:01
【问题描述】：

我遇到了一个奇怪的问题，我不确定从哪里开始调查可能导致它的原因。我目前正在使用一个使用 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>

两个不同的组件首先应该只是一个茶壶，中间有一部分

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

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

【问题讨论】：

这可能是您正在使用的库中的一个错误，而不是 Angular 本身。我会从那里开始。 Angular 中的组件始终是“唯一且独立的”

标签： html angular typescript three.js

【解决方案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

【讨论】：