Question

我有以下代码

import { Component, OnInit } from '@angular/core';
import { mobile } from '../../../../environments/environment';

@Component({
  selector: 'ctk-details-advisory',
  templateUrl: (mobile) ? 'details-advisory.component.mobile.html' : 
'details-advisory.component.html',
 styleUrls: ['./details-advisory.component.scss'],
})
export class DetailsAdvisoryComponent implements OnInit {
// ...

这可以帮助我控制不同的html，pc和移动视图。问题是，当我要执行单元测试时，出现以下错误

找不到模块：错误：无法解析'（移动）？ '/home/anonymous/criptoanalisis-0.2/frontend/src/app/pages/advisory/details-advisory'中的'details-advisory.component.mobile.html'：'details-advisory.component.html'' @ ./src/app/pages/advisory/details-advisory/details-advisory.component.ts 23：22-121

对解决这个问题会有很大帮助或另一种方式来控制不同的html 事实是，我要花很多时间尝试解决问题我将不胜感激任何建议

Answer 1

使用单个html（details-advisory.component.html），而不要使用两个不同的模板（一个用于单独的移动设备）。在component代码中，定义一个类成员

public isMobile = mobile; // imported from the environment in the import section

然后，在template html代码中，您可以使用

<ng-container *ngIf="isMobile; else desktopView">
// all html related to mobile view
</ng-container>

<ng-container #desktopview>
// all html related to desktop view
</ng-container>

有没有办法在单个组件中控制html pc和html mobile？

1 个答案: