时间戳

首页 > 解决方案 > 在 Angular 中使用带有多个相同组件实例的引导程序的响应式屏幕

angular - 在 Angular 中使用带有多个相同组件实例的引导程序的响应式屏幕

问题描述

我正在使用引导网格系统（xs、sm 和 md 及以上）编写响应式屏幕。下面的代码只显示一次 app-prize-list，具体取决于屏幕大小。然而，app-prize-list 组件被初始化了 3 次，每次在代码中出现一次，不管它们是否会基于网格系统显示。

我可以说是因为初始化到达了后端（数据库），并且我可以看到所做的调用是页面上组件的倍数。如果我注释掉 app-prize-list 的一个实例，那么我只会看到对数据库的两次点击。如果我注释掉其中两个，那么我只会看到对数据库的一次命中。如果不注释掉其中任何一个，那么我会看到对数据库的三个命中。

我希望完全忽略未根据屏幕尺寸显示的部分。是否有另一种方法可以确保显示正确的部分（基于屏幕大小）并且仅激活适用于该部分的组件？

标签： angularbootstrap-4initializationcomponents

解决方案

您使用 app-prize-list 组件 3 次，因此 angular 将其初始化 3 次， display:none 与 css 及其在屏幕上的呈现方式有关，但无论任何事情，组件都会被创建。

您可以动态创建组件来解决此问题。您可以在他们的网站 https://angular.io/guide/dynamic-component-loader上参考有关在 Angular 中创建动态组件的文档

一种解决方法是使用媒体查询并定义您的自定义 css

@media (min-width: 576px) { 
  .d-custom{
    color:red;
  }
}

@media (min-width: 768px) { 
  .d-custom{
    color:blue;
  }
}

@media (min-width: 992px) { 
  .d-custom{
    color:green;
  }
 }

@media (min-width: 1200px) { 
  .d-custom{
    color: yellow;
  }
 }

推荐阅读