Angular的创建 Home 组件的方法

约定不等于承诺〃 2023-10-13 22:46 14阅读 0赞

# 1. 组件的概念 #

*  Angular 应用程序是`围绕组件构建`的，组件是 Angular 的基本构建块。
 *  `组件`包含为应用程序中的元素提供`功能和外观的代码、HTML 布局和 CSS 样式信息`。在 Angular 中，组件可以包含其他组件。应用程序的功能和外观可以拆分成一系列组件。  
    在 Angular 中，`组件具有一些用来定义其属性的元数据`。当你创建 `HomeComponent` 时，会用到这些属性：
 *  selector：描述了 `Angular 要如何在模板中引用本组件`。
 *  standalone：描述组件`是否需要 ngModule`。
 *  imports：描述`组件的依赖关系`。
 *  template：描述`组件的 HTML 标记和布局`。
 *  styleUrls：在数组中列出`组件使用的 CSS 文件的 URL`。

# 2.创建 HomeComponent #

在此步骤中，你将为应用程序创建一个新组件。

在 IDE 的终端窗格中：

1.  在你的项目目录中，导航到 test 目录。
2.  运行此命令以创建一个新的 HomeComponent

ng generate component Home --standalone --inline-template --skip-tests

![在这里插入图片描述][16d4a60aa9c445fc9b0deb3e06463675.png]

1.  运行此命令以构建和提供应用程序。

npm run start

1.  打开浏览器并导航到 http://localhost:4200 以找到该应用程序。

# 3.将新组件添加到应用的布局中 #

要将新组件 HomeComponent 添加到应用的根组件 AppComponent 中，以便它能显示在应用的布局中。

1.  在编辑器中打开 `app.component.ts`。
2.  在`app.component.ts`中，通过将此行添加到文件顶部来导入 `HomeComponent`。

import {
         HomeComponent } from './home/home.component';

1.  在 app.component.ts 中的`@Component` 中，更新数组属性 `imports`以把 `HomeComponent`添加到其中

imports: [
      HomeComponent,
    ],

1.  在 app.component.ts 中的 `@Component`中，更新 template 属性以包含以下 HTML 代码。

template: `
      <main>
        <header class="brand-name">
          <img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true">
        </header>
        <section class="content">
          <app-home></app-home>
        </section>
      </main>
    `,

1.  保存对`app.component.ts` 的更改。
2.  如果 `ng serve`正在运行，应用程序应该更新。如果 ng serve 没有运行，请重新启动它。你应用中的Hello world 应该已改为来自 `HomeComponent`的 `home works!`。
3.  在浏览器中检查正在运行的应用程序并确认该应用程序已更新。  
    ![在这里插入图片描述][a53ae74e984f4c919a052605f62d7f15.png]

# 4.向 HomeComponent 添加一些特性 #

在此步骤中，你将向 HomeComponent 添加一些特性。

在上一步中，你将默认的 `HomeComponent`添加到了应用程序模板中，因此它的默认 HTML 会出现在应用程序中。在此步骤中，你将添加一个搜索过滤器和按钮，以供后面的课程中使用。目前，这就是 HomeComponent 全部内容。请注意，此步骤只是将搜索元素添加到了布局中，还没有实现任何功能。

在 IDE 的编辑窗格中：

1.  在 test 目录下，在编辑器中打开 home.component.ts。
2.  在 home.component.ts 的 @Component 中，使用如下代码更新 template 属性。

替换 src/app/home/home.component.ts

template: `
      <section>
        <form>
          <input type="text" placeholder="Filter by city">
          <button class="primary" type="button">Search</button>
        </form>
      </section>
    `,

3.接下来，在编辑器中打开 home.component.css 并使用如下样式更新其内容。

替换 src/app/home/home.component.css

.results {
        
      display: grid;
      column-gap: 14px;
      row-gap: 14px;
      grid-template-columns: repeat(auto-fill, minmax(400px, 400px));
      margin-top: 50px;
      justify-content: space-around;
    }
    
    input[type="text"] {
        
      border: solid 1px var(--primary-color);
      padding: 10px;
      border-radius: 8px;
      margin-right: 4px;
      display: inline-block;
      width: 30%;
    }
    
    button {
        
      padding: 10px;
      border: solid 1px var(--primary-color);
      background: var(--primary-color);
      color: white;
      border-radius: 8px;
    }
    
    @media (min-width: 500px) and (max-width: 768px) {
        
      .results {
        
          grid-template-columns: repeat(2, 1fr);
      }
      input[type="text"] {
        
          width: 70%;
      }   
    }
    
    @media (max-width: 499px) {
        
      .results {
        
          grid-template-columns: 1fr;
      }    
    }

确保应用在构建时没有错误。你应该能在应用程序中找到过滤器查询框和按钮，并且设置它们的样式。在继续下一步之前更正所有错误。

![在这里插入图片描述][306f66fedc224088a5a757c699380851.png]

[16d4a60aa9c445fc9b0deb3e06463675.png]: https://img-blog.csdnimg.cn/16d4a60aa9c445fc9b0deb3e06463675.png
[a53ae74e984f4c919a052605f62d7f15.png]: https://img-blog.csdnimg.cn/a53ae74e984f4c919a052605f62d7f15.png
[306f66fedc224088a5a757c699380851.png]: https://img-blog.csdnimg.cn/306f66fedc224088a5a757c699380851.png