Angular的创建 Home 组件的方法
1. 组件的概念
-
Angular 应用程序是
围绕组件构建的，组件是 Angular 的基本构建块。 -
组件包含为应用程序中的元素提供功能和外观的代码、HTML 布局和 CSS 样式信息。在 Angular 中，组件可以包含其他组件。应用程序的功能和外观可以拆分成一系列组件。
在 Angular 中，组件具有一些用来定义其属性的元数据。当你创建HomeComponent时，会用到这些属性： -
selector：描述了
Angular 要如何在模板中引用本组件。 -
standalone：描述组件
是否需要 ngModule。 -
imports：描述
组件的依赖关系。 -
template：描述
组件的 HTML 标记和布局。 -
styleUrls：在数组中列出
组件使用的 CSS 文件的 URL。
2.创建 HomeComponent
在此步骤中，你将为应用程序创建一个新组件。
在 IDE 的终端窗格中：
-
在你的项目目录中，导航到 test 目录。
-
运行此命令以创建一个新的 HomeComponent
ng generate component Home --standalone --inline-template --skip-tests
- 运行此命令以构建和提供应用程序。
npm run start
- 打开浏览器并导航到 http://localhost:4200 以找到该应用程序。
3.将新组件添加到应用的布局中
要将新组件 HomeComponent 添加到应用的根组件 AppComponent 中，以便它能显示在应用的布局中。
-
在编辑器中打开
app.component.ts。 -
在
app.component.ts中，通过将此行添加到文件顶部来导入HomeComponent。
import { HomeComponent } from './home/home.component';
- 在 app.component.ts 中的
@Component中，更新数组属性imports以把HomeComponent添加到其中
imports: [HomeComponent,
],
- 在 app.component.ts 中的
@Component中，更新 template 属性以包含以下 HTML 代码。
template: `
- 保存对
app.component.ts的更改。 - 如果
ng serve正在运行，应用程序应该更新。如果 ng serve 没有运行，请重新启动它。你应用中的Hello world 应该已改为来自HomeComponent的home works!。 - 在浏览器中检查正在运行的应用程序并确认该应用程序已更新。
4.向 HomeComponent 添加一些特性
在此步骤中，你将向 HomeComponent 添加一些特性。
在上一步中，你将默认的 HomeComponent 添加到了应用程序模板中，因此它的默认 HTML 会出现在应用程序中。在此步骤中，你将添加一个搜索过滤器和按钮，以供后面的课程中使用。目前，这就是 HomeComponent 全部内容。请注意，此步骤只是将搜索元素添加到了布局中，还没有实现任何功能。
在 IDE 的编辑窗格中：
-
在 test 目录下，在编辑器中打开 home.component.ts。
-
在 home.component.ts 的 @Component 中，使用如下代码更新 template 属性。
替换 src/app/home/home.component.ts
template: `
`,
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;}
}
确保应用在构建时没有错误。你应该能在应用程序中找到过滤器查询框和按钮，并且设置它们的样式。在继续下一步之前更正所有错误。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！