Question

我目前正在Angular项目中工作，我们需要使用一个共享组件在主页上两次显示信息。用于显示此信息的共享组件基于@Input() key: string;进行了更改。

但是，当两次调用该组件时，会发生一次，第一次数据显示在一个组件调用中。一段时间后，该信息仅被第二组信息替换为同一组件中的信息。组件的第二个实例在整个时间内一直保持空白。

在这里称为组件：

<div class="col-md-5">
    <information-panel-small key="home-invest-online"></information-panel-small>
</div>
<div class="col-md-7">
    <information-panel-small key="test-video"></information-panel-small>
</div>

这是我的组件的样子：

export class InformationPanelSmallComponent implements OnInit {

  @Input() key: string;

  infoPanel: InfoPanel;

  constructor(private infoPanelSmallService: InfoPanelSmallService) {
    this.infoPanel = new InfoPanel();
  }

  ngOnInit() {
    if (this.key != undefined) {
      this.infoPanelSmallService.getSmallInfoPanel(this.key)
        .subscribe(x => {
          if (x != null) {
            this.infoPanel = x.InfoPanel;
          }
        });
    }
  }

}

我不是100％肯定这是正确的，但我认为我至少应该尝试一下，然后再发布在 SO 上。我最初的想法是，如您在constructor中看到的那样，创建一个新的类实例，以便每次调用该组件时，它都是全新的，但是显然这是行不通的。

如果您有任何建议，我可以尝试，我将不胜感激。还请告诉我是否可以提供更多信息。基本上可以，但是所有信息都显示在一个组件中，而不是在两个单独的组件中。

Answer 1

因此，我不确定它以前如何能工作一半，但是我没有将正在使用的服务包括在组件中的Providers列表下。所以在它看起来像这样之前：

@Component({
  selector: 'information-panel-small',
  templateUrl: './information-panel-small.component.html',
  styleUrls: ['./information-panel-small.component.scss']
})

然后像这样：

@Component({
  selector: 'information-panel-small',
  templateUrl: './information-panel-small.component.html',
  styleUrls: ['./information-panel-small.component.scss'],
  providers: [InfoPanelSmallService]
})

我希望这可以为将来的某人提供可能明显的解决方案。感谢您在评论中提供的所有帮助！

如何在同一视图上多次调用角度分量？

1 个答案: