使用Angular 6进行开发的主要部分是在组件中完成的.组件基本上是与组件的.html文件交互的类，它们会显示在浏览器上.我们在前面的一章中看到了文件结构.文件结构包含app组件，它包含以下文件 :

• app.component.css

• app.component.html

• app.component.spec.ts

• app.component.ts

• app.module.ts

我们在使用angular-cli命令创建新项目时默认创建了上面的文件.

如果打开 app.module.ts 文件，它有一些已导入的库以及一个声明，它被分配给appcomponent，如下所示;

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';@NgModule({   declarations: [      AppComponent   ],   imports: [      BrowserModule   ],   providers: [],   bootstrap: [AppComponent]})export class AppModule { }

声明包括AppComponent变量，我们已经导入.这将成为父组件.

现在，angular-cli有一个命令来创建自己的组件.但是，默认情况下创建的app组件将始终保留为父组件，创建的下一个组件将构成子组件.

现在让我们运行命令来创建组件.

ng generate component new-cmp

当您运行上述命令时在命令行中，您将收到以下输出 :

D:\Node\Angular6App>ng generate component new-cmpCREATE src/app/new-cmp/new-cmp.component.html (26 bytes)CREATE src/app/new-cmp/new-cmp.component.spec.ts (629 bytes)CREATE src/app/new-cmp/new-cmp.component.ts (272 bytes)CREATE src/app/new-cmp/new-cmp.component.css (0 bytes)UPDATE src/app/app.module.ts (398 bytes)

现在，如果我们去查看文件结构，我们将获得new-cmp在src/app文件夹下创建的新文件夹.

在n中创建以下文件ew-cmp文件夹 :

• new-cmp.component.css : 创建新组件的css文件.

• new-cmp.component.html :  html文件已创建.

• new-cmp.component.spec.ts : 这可以用于单元测试.

• new-cmp.component.ts : 在这里，我们可以定义模块，属性等.

将更改添加到app.module.ts文件中，如下所示;

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';import { NewCmpComponent } from './new-cmp/new-cmp.component';// includes the new-cmp component we created@NgModule({   declarations: [      AppComponent,      NewCmpComponent // here it is added in declarations and will behave as a child component   ],   imports: [      BrowserModule   ],   providers: [],   bootstrap: [AppComponent] //for bootstrap the AppComponent the main app component is given.})export class AppModule { }

new-cmp.component.ts 文件生成如下 :

import { Component, OnInit } from '@angular/core'; // here angular/core is imported .@Component({   // this is a declarator which starts with @ sign. The component word marked in bold needs to be the same.   selector: 'app-new-cmp', //   templateUrl: './new-cmp.component.html',    // reference to the html file created in the new component.   styleUrls: ['./new-cmp.component.css'] // reference to the style file.})export class NewCmpComponent implements OnInit {   constructor() { }   ngOnInit() {}}

如果你看到上面的new-cmp.component.ts文件，它会创建一个名为NewCmpComponent的新类，它实现OnInit.In，有一个构造函数和一个名为ngOnInit()的方法.执行类时默认调用ngOnInit.

让我们检查一下流的工作原理.现在，默认情况下创建的app组件将成为父组件.稍后添加的任何组件都将成为子组件.

当我们点击 http://localhost:4200/浏览器中的url时，它首先执行索引. html文件显示如下 :

以上是普通的html文件，我们看不到浏览器中打印的任何内容.看看正文部分中的标记.

这是Angular默认创建的根标签.此标记在 main.ts 文件中有引用.

import { enableProdMode } from '@angular/core';import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app/app.module';import { environment } from './environments/environment';if (environment.production) {   enableProdMode();}platformBrowserDynamic().bootstrapModule(AppModule);

AppModule是从主要父模块的应用程序导入的，同样是给予引导程序模块，这会使appmodule加载.

现在让我们看看 app.module.ts 文件 :

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';import { NewCmpComponent } from './new-cmp/new-cmp.component';@NgModule({   declarations: [      AppComponent,      NewCmpComponent   ],   imports: [      BrowserModule   ],   providers: [],   bootstrap: [AppComponent]})export class AppModule { }

这里，AppComponent是给定的名称，即存储 app引用的变量. Component.ts 和引导程序一样.现在让我们看看 app.component.ts 文件.

import { Component } from '@angular/core';@Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.css']})export class AppComponent {   title = 'Angular 6 Project!';}

导入Angular核心并将其称为Component，并在Declarator中使用相同的 :

@Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.css']})

在对选择器的声明符引用中， templateUrl 和 styleUrl .这里的选择器只是放在我们上面看到的index.html文件中的标记.

AppComponent类有一个名为title的变量，它在浏览器中显示./p>

@Component 使用名为app.component.html的templateUrl，如下所示 :

   
      Welcome to {{title}}.