使用Angular 4进行开发的主要部分是在组件中完成的.组件基本上是与组件的.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 g component new-cmp
当您运行上述命令时在命令行中，您将收到以下输出 :
C:\projectA4\Angular 4-app>ng g component new-cmp installing component create src\app\new-cmp\new-cmp.component.css create src\app\new-cmp\new-cmp.component.html create src\app\new-cmp\new-cmp.component.spec.ts create src\app\new-cmp\new-cmp.component.ts update src\app\app.module.ts
现在，如果我们去查看文件结构，我们将获得在src/app文件夹下创建的new-cmp新文件夹.
在new-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文件显示如下 :
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>Angular 4App</title> <base href = "/"> <meta name="viewport" content="width = device-width, initial-scale = 1"> <link rel = "icon" type = "image/x-icon" href = "favicon.ico"> </head> <body> <app-root></app-root> </body> </html>
以上是普通的html文件，我们看不到浏览器中打印的任何内容.看看正文部分中的标记.
< app-root></app-root>
这是Angular默认创建的根标签.此标记在 main.ts 文件中有引用.
import {enableProdMode} from'@ angular/core ";来自'@ angular/platform-browser-dynamic'的
import {platformBrowserDynamic};来自'./app/app.module'的
import {AppModule};来自'./environments/environment'的
import {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 4 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，如下所示 :
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{title}}.
</h1>
</div>它只有html代码和大括号中的变量标题.它将替换为 app.component.ts 文件中的值.这称为绑定.我们将在后续章节中讨论绑定的概念.
现在我们已经创建了一个名为 new-cmp 的新组件.当运行用于创建新组件的命令时， app.module.ts 文件中包含相同内容.
app.module.ts 引用了创建的新组件.
现在让我们检查在new-cmp中创建的新文件.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-new-cmp',
templateUrl: './new-cmp.component.html',
styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
constructor() { }
ngOnInit() {}
}在这里，我们也必须导入核心.声明器中使用了组件的引用.
声明器具有名为 app-new-cmp 的选择器和 templateUrl 和 styleUrl .
名为 new-cmp.component.html 的.html如下 :
<p> new-cmp works! </p>
如上所示，我们有html代码，即p标签.样式文件为空，因为我们目前不需要任何样式.但是当我们运行项目时，我们看不到任何与新组件相关的内容在浏览器中显示.现在让我们添加一些内容，稍后可以在浏览器中看到相同内容.
选择器，即 app-new-cmp 需要添加到 app.component .html 文件如下 :
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{title}}.
</h1>
</div>
<app-new-cmp></app-new-cmp>当添加< app-new-cmp></app-new-cmp> 标记时，所有这些存在于创建的新组件的.html文件中，将与浏览器一起显示在父组件数据上.
让我们看一下新组件.html 文件和 new-cmp.component.ts 文件.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-new-cmp',
templateUrl: './new-cmp.component.html',
styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
newcomponent = "Entered in new component created";
constructor() {}
ngOnInit() { }
}在课堂上，我们添加了一个变量称为新组件，值为"在创建的新组件中输入".
上述变量绑定在 .new-cmp.component中. html 文件如下 :
<p>
{{newcomponent}}
</p>
<p>
new-cmp works!
</p>现在我们已经包含了< app-new-cmp></app-new-cmp> 选择器了应用.组件.html 是父组件的.html，新组件.html文件(new-cmp.component.html)中的内容在浏览器中显示如下 :
同样，我们可以使用选择器创建组件并链接相同的组件在 app.component.html 文件中，根据我们的要求.
