在使用Angular Material创建的项目中添加注册页面

3 年 ago
韵, 科
1 minute

首先

我在以下的帖子中创建了一个适合Angular（Material）初学者的项目。

我制作了Angular的起始工具包
https://qiita.com/shinno21/items/b072e48d28f2ee7d34d9

作为发展的第一步，我在原始项目中只有一个简单的列表页面上添加了注册页面。

添加注册页面的提交

我正在添加代码，如下所示。

Angular
https://github.com/shinno21/sk-app/commit/28df4808312f832098dc869a907939fab66ebaa6

Angular
https://github.com/shinno21/sk-app/commit/28df4808312f832098dc869a907939fab66ebaa6

Django Restframework
https://github.com/shinno21/drf_sample/commit/6822ade6ab8c9811cedea47a14ba7169b4fdf4de

Django Restframework 是一个开源软件，它提供了一个用于构建基于 Django 的 Web API 的工具集。你可以在这个网址 https://github.com/shinno21/drf_sample/commit/6822ade6ab8c9811cedea47a14ba7169b4fdf4de 找到相关的代码和提交记录。

解释

我正在按照以下步骤添加代码。

    • Angular CLIで登録画面として使うコンポーネントのテンプレートを追加

 

    • app-routing.module.ts　に登録画面のURLを追加

 

    • app.module.ts　に必要なコンポーネントを追加

 

    • 登録画面の実装を行う

 

    その他

在Angular CLI中，添加用作注册页面的组件模板。

> ng g component components/sample/sample-reg

从 Angular 的角度来看，一个屏幕 不一定是一个组件，但过于细分组件也不是好事，所以基本上我们是这样处理的。

    src/app/components/sample/sample-reg/ 以下にhtml, css, ts, spec.ts のセットが作られる

在这里添加用于注册页面的组件。

(仅供参考)生成 Angular CLI

在 app-routing.module.ts 中添加注册页面的URL

加入以下更改：

在app.module.ts文件中添加所需的组件。

为了进行以下更改，在本次的用户界面中，我们将使用日历输入和下拉菜单输入，因此需要从Angular Material中添加组件。（需要添加MatNativeDateModule、MatDatepickerModule和MatSelectModule相关代码）
https://github.com/shinno21/sk-app/commit/28df4808312f832098dc869a907939fab66ebaa6#diff-fc6b22833aeaf77f8440c4970ade705e

(参考)Angular Material 组件的使用方法

找到自己想要使用的组件。

请参考官方网站。网站上有可用的组件的列表。
https://material.angular.io/components/categories

将想要使用的组件应用到项目中

在这个公式网站的这个位置有说明方法的内容。
https://material.angular.io/guide/getting-started#display-a-component

执行注册页面的实现

这次主要关注页面布局，不需要进行测试，只需实现HTML和TS的编码。
为调用注册相关的API，在现有的Service类中添加注册方法。

其他

将要输入到HTTP头部的值设置为常量。
对于Post类的“创建日期”属性，进行了与API端一致的变量名调整修正。

另外，我們在API端考慮到了從Angular畫面傳遞的日期格式，做出了修正（雖然也包含了部分不必要的修改，這是因為黑色格式化工具的原因）。

bannerAds