如何在Angular Material Design中实现“入职/演练”页面？

Question

有人可以告诉我如何在Angular Material Design（电子）中创建入职/演练吗？

我还是整个Angular的新手。基本上，我需要有一个如下图所示的桌面应用程序。显示一堆图像，并允许用户通过单击箭头图标在页面之间导航。

---

我找不到从哪里开始的任何示例或教程。

任何人都能让我入门吗？

谢谢。

Answer 1

就这样，您的问题等同于询问如何构建简单的二冲程发动机。其中并没有那么多的零件（幸运的是，我们不必自己加工），但是如果您想学习如何设计零件，就需要学习很多东西。把它们放在一起。因此，（我假设）对其他人投反对票–您可能会发现更具体的问题，这将是更有用的回答，显示您已进行了哪些研究，您已尝试过什么，未进行过哪些工作以及为什么您认为它应该有效。

有很多关于角度的各个方面的教程，可以通过简单的Google搜索找到它们，但是我想您正在寻找的是关于您想做什么的教程。当涉及到前端编程（实际上是所有非平凡的编程）时，每个人的需求都会略有不同，因此很少有教程可以解释您想要制作的确切程序，特别是对于企业产品。我建议您选择一个入门教程并逐步进行学习（main Angular one不错）-您当前的项目并不需要所有这些，但是它可以让您学习angular的基础知识，然后从那里开始学习如何构建您的特定应用程序。

---

一般信息：

Angular允许您制作一个Web应用程序，以托管在某个域中。

一个项目由一些组件组成，这些组件必须包含在app.modules.ts文件中（使用angular-cli创建组件时自动完成）。

可以将组件放在不同的URL上，通过路由器（app.routing.ts，也可以自动生成）进行管理，也可以嵌套在彼此之间。每个组件都需要一个html模板，以描述其显示方式。您可以直接使用html中组件类的属性。

尽管您不必为每个演练屏幕都需要一个路线和一个组件-angular的力量在于能够创建一个可以响应用户输入而动态变化的页面。大多数Web应用程序将需要许多页面，每个页面都可以根据输入进行更改，但是对于您而言，我希望您只需要一个页面。 （查看Single Page Applications-SPA）

---

那么该松弛教程上有哪些内容？有一个背景，一个静态的“跳过”按钮，1个或2个动态箭头以及位于底部的一系列点。我希望您只需要一个组件，并带有背景列表。在*ngIf中查找箭头*ngFor，在路由器中查找跳过按钮。

不过，您可以使用mat-tab-groups而不是背景列表，而是使用一个主要组件，以及每个子页面一组组件。使页面切换变得非常简单。