另一篇 Angular 文章，零件组件创建

在上一篇文章中，我只是讲了项目创建。我的意思是，主项目，而不是子项目。这些将是未来文章的主题。

今天是组件创建相关的。与项目创建一样，Angular CLI 是您最好的朋友。所以去吧：

 
ng 生成组件 hello-world

它在 my-new-project/src/app/hello-world 文件夹中运行代码生成，包含 4 个文件：

• hello-world.component.html ：模板
• hello-world.component.scss ：样式，采用 scss 格式，因为这是我在项目创建提示符下的选择
• hello-world.component.spec.ts ：测试文件
• hello-world.component.ts：组件

现在运行 ngserve 并打开浏览器到 localhost:4200 查看结果
嘿，但是组件没有渲染！为什么？
因为我们没有使用它:-)

现在打开根组件“app.component.ts”并在“imports”部分添加 HelloWorlComponent：

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HelloWorldComponent } from './hello-world/hello-world.component';
@Component({
 selector: 'app-root',
 imports: [RouterOutlet, HelloWorldComponent],
 templateUrl: './app.component.html',
 styleUrl: './app.component.scss',
})
export class AppComponent {
 title = 'angular-tutorial';
}

该组件现在已经在 AppComponent 中可用了，我们可以使用它了。只需编辑 hello-world.component.html 文件并将所有代码替换为：

<app-hello-world></app-hello-world>
<router-outlet></router-outlet>

例如，忘记 router-outlet，因为我们没有阻止在项目创建时安装 Angular Router（如果您不想路由，可以这样做：ng new my-new-project --routing=false ）

默认选择器前缀是'app'，这就是为什么组件的选择器是'app-hello-world'

检查浏览器，您将看到组件的默认内容。

您可以通过将其添加到 hello-world.component.scss 来自定义 CSS：

:host {
 color: blueviolet
}

检查浏览器，您将看到文本的新颜色。 :host 选择器与当前的 hello-world 组件相关。

现在，您知道如何生成一个简单的组件

今天过得愉快吗？

[原始帖子] https://rebolon.medium.com/yet-another-angular-article-part-2-components-creation-550c14b991a2

以上是另一篇 Angular 文章，零件组件创建的详细内容。更多信息请关注PHP中文网其他相关文章！