Question

我有一个组件，我希望有一个桌面设备视图和另一个移动设备视图。我将在服务中有一个标志，告诉我用户设备是移动设备还是桌面设备。两个视图中的状态和逻辑是相同的。桌面视图应显示表中的数据，而移动视图应以块的形式显示数据。

实现此行为的最佳方法是什么？

Answer 1

一种方法是，如果您在服务中有标志告诉您有关设备的信息，那么您可以将该标志与其他数据一起发送到组件，然后从组件文件中将该标志发送到模板文件以获得条件结构在它。

Answer 2

您可以通过以下方式使用模板中的*ngIf directive：

yout-componant.componant.html（模板）：

<div *ngIf="desktopUser">
  // whatever your html is for desktop user
</div
<div *ngIf"!desktopUser">
  // whatever your html is for other device
</div>

Answer 3

@Udi您可以继续当前的路径（在这种情况下，其他答案已经解决了这些选项），或者更好的是，利用Flex布局创建动态响应模板，而无需不必要的代码，结构指令和创建多个视图来维护。

我是@ angular / flex-layout的忠实粉丝。这里有一些链接可以让你快速开始（如果你是新手）或者你可以深入了解@ angular / flex-layout的github repo来开始编码。

详细介绍Flex。 https://medium.freecodecamp.org/even-more-about-how-flexbox-works-explained-in-big-colorful-animated-gifs-a5a74812b053

<强>的cheatsheet： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

@ angular / flex-layout github page / repo https://github.com/angular/flex-layout/wiki/Live-Demos

祝你好运！

一个组件具有不同的视图

3 个答案: