另一篇 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中文網其他相關文章！