如何在 AngularJS 中手动注册组件？

众所周知，angularJS 中的组件是每个应用程序的基本构建块。通常，我们可以通过简单地运行以下命令来创建 Angular 组件。

ng g c component_name

这将创建一系列文件，如下图所示。这包括以下文件 -

1. HTML 文件：用于生成 HTML DOM（文档对象模型）。
2. spec.ts 文件：用于运行组件的单元测试用例。
3. component.ts：这是包含项目主要逻辑的主文件。
4. css 文件：用于向网页添加样式。

Angular CLI 组件创建

在 Angular CLI 生成组件的最后一部分，它只是更新 app.module.ts 文件以包含新生成的组件。如果您仔细观察，此步骤与我们在下面显示的步骤 3 中执行的步骤相同。

手动生成组件的步骤 -

• 在 Angular 项目的“app”文件夹下创建一个新文件夹。为此，请在任何适合您的 IDE 中打开您的项目。我们将在这里使用 VS Code IDE。现在右键单击“应用程序”并单击新文件夹或单击上面的图标以创建文件夹或从文件资源管理器手动创建文件夹。

新文件夹创建

• 现在创建一个打字稿文件。将其视为customer.component.ts 。现在我们将向该文件添加内容，例如模板、选择器、样式等。

customer.component.ts

// This is our main component class called
// as 'CustomerComponent'
  
// Here we have imported 'Component' 
// module from Angular library
import { Component } from "@angular/core";
  
@Component({
  
    // This selector is used to refer
    // to the component in html
    selector: 'chinmay',
  
    /* Template or templateURL is used to 
    provide the HTML part which is to be 
    rendered into the browser 
    DOM(Document Object Model) */
    template: '
 Welcome to manual component creation
',
  
    // CSS styles if any required can 
    // be specified here.
    styles: []        
    }
)
// Exporting the component class so 
// that it can be used to generate 
// relationships among the components
export class CustomerComponent {
}

• 现在转到app.module.ts文件并将您自定义创建的组件导入@NgModule声明部分。

app.module.ts

/* For the first few lines, we will have 
to import certain Angular library modules 
So that we can run our project smoothly.*/
  
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
  
// Here we have imported our custom created component
import { CustomerComponent } from './customer/customer';
  
@NgModule({
    declarations: [
        AppComponent,
        CustomerComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

• 对于最后一步和最后一步，转到app.component.html文件并添加您在自定义组件打字稿文件 (custom.ts)中添加的相同选择器。

app.component.html

Welcome to GeeksForGeeks !! 

• 完毕 ！！现在您已经成功地在 Angular 中创建并手动注册了一个组件。此外，您还可以创建支持组件所需的支持文件，例如 CSS 样式、HTML 和规范文件，以对组件进行单元测试。

浏览器上的项目输出