Question

有没有办法在一个组件中有2个模板？我的意思是，例如我正在建设的网站不是响应式网页设计。因此，有2种不同的视图，桌面和移动视图。我想为两者使用相同的应用程序。如何在基于用户设备的组件中切换两个模板（一个用于桌面视图，一个用于移动视图）？这可能吗？

Answer 1

首先，您必须在初始化时检测屏幕大小并设置一个特殊标志，以了解该应用当前运行的设备。

initializeRWD() {
    if (screen.width < 1080) {
        this.isSmallScreen = true;
    } else {
        this.isSmallScreen = false;
    }
}

接下来，我会在您的模板中添加<div class="desktop">和<div class="mobile">，并根据屏幕大小显示其中任何一个，例如：

<div class="desktop"> *ngIf="!isSmallScreen">
    <!-- desktop code here -->
</div>

<div class="mobile" *ngIf="isSmallScreen">
<!-- mobile code here -->
</div>`

如何在一个应用程序中实现自适应Web设计

1 个答案: