/**/

Angular7 - 组件(Components)

首页 / Angular7入门教程 / Angular7 - 组件(Components)

Angular 7开发的主要部分是在组件中完成的。组件是与组件的.html文件进行交互的类,该文件会显示在浏览器中。

该文件结构具有app组件,并且由以下文件组成-

  • app.component.css
  • app.component.html
  • app.component.spec.ts
  • app.component.ts
  • app.module.ts

并且,如果您在项目设置过程中选择了Angular Routing,则还将添加与Routing有关的文件,这些文件如下所示:

  • app-routing.module.ts

当我们使用angular-cli命令创建新项目时,以上文件是默认创建的。

无涯教程网

如果打开 app.module.ts 文件,则该文件具有导入的一些库以及一个为应用程序组件分配的声明式,如下所示:

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component';

@NgModule({ 
   declarations: [ 
      AppComponent 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [],
   bootstrap: [AppComponent] 
})
export class AppModule { }

声明包括我们已经导入的AppComponent变量。

现在,angular-cli具有创建您自己的组件的命令。但是,默认情况下创建的应用程序组件将始终保留为父组件,而下一个创建的组件将构成子组件。

现在让我们运行命令以使用下面的代码行创建组件:

ng g component new-cmp

在命令行中运行上述命令时,将收到以下输出-

C:\projectA7\angular7-app>ng g component new-cmp 
CREATE 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 (477 bytes)

现在,如果我们检查文件结构,我们将在 src/app 文件夹下获得new-cmp new文件夹。

以下文件在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 { AppRoutingModule } from './app-routing.module'; 
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,
      AppRoutingModule 
   ], 
   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', //selector to be used inside .html file. 
   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,其中包含一个构造函数和一个名为ngOnInit()的方法。执行该类时,默认情况下会调用ngOnInit。

当我们在" http://localhost:4200 /" 浏览器中点击url时,它首先执行index.html文件,如下所示-

<html lang="en">
 
   <head> 
      <meta charset="utf-8"> 
      <title>Angular7App</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';
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).catch(err => console.error(err));

从主父模块的应用程序导入AppModule,并将相同的内容提供给引导模块,这会导致appmodule加载。

现在让我们看一下 app.module.ts 文件-

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component';

@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule '
   ], 
   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 7'; 
}

angular/core 被导入并称为Component,并且在Declarator中使用的是-

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

在声明器对selector的引用中,给出了templateUrl和styleUrl。这里的selector不过是我们上面看到的位于index.html文件中的标签。

AppComponent类具有一个名为title的变量,该变量显示在浏览器中, @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 文件中也会包含相同的内容。

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 {   
   constructor() { } 
   ngOnInit() { } 
}

在这里,我们也必须导入核心(angular/core),该组件的引用在声明器中使用,声明程序具有名为app-new-cmp的selector以及templateUrl和styleUrl。

名为new-cmp.component.html的.html如下-

<p> 
   new-cmp works!
</p>

如上所示,我们有html代码,即p标签。样式文件为空,因为我们目前不需要任何样式。但是,当我们运行项目时,在浏览器中看不到与新组件相关的任何内容。

Screen

我们没有看到与正在显示的新组件相关的任何内容。创建的新组件具有一个.html文件,其中包含以下详细信息-

<p>
   new-cmp works!
<p>

但是我们在浏览器中并没有得到相同的输出。现在让我们查看获取新组件内容以在浏览器中显示所需的更改。

selector 'app-new-cmp'是从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 {  
   constructor() { } 
   ngOnInit() { } 
}

selector即 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>
New Cmp

让我们向创建的新组件添加更多详细信息,并在浏览器中查看显示。

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() { }
}

在该类中,我们添加了一个名为 newcomponent 的变量,其值为"Entered in new component created"。

上面的变量添加到 new-cmp.component.html 文件中,如下所示-

<p> 
   {{newcomponent}} 
</p>
<p> 
   new-cmp works! 
</p>

现在,由于我们在父组件的.html(即app.component.html)中包含了<app-new-cmp> </app-new-cmp> 选择器,因此new-cmp.component中的内容已经存在。 html文件显示在浏览器上。 我们还将在new-cmp.component.css文件中为新组件添加一些CSS,如下所示-

p { 
   color: blue; 
   font-size: 25px; 
}

因此,我们为p标签添加了25px的蓝色和字体大小。

Color Font

这一章《Angular7 - 组件(Components)》你学到了什么?在下面做个笔记吧!做站不易,你的分享是对我们最大的支持

好记忆不如烂笔头。留下你的足迹吧 :)

猜你喜欢

浏览器工作原理与实践 -〔李兵〕

研发效率破局之道 -〔葛俊〕

高并发系统设计40问 -〔唐扬〕

手机摄影 -〔@随你们去〕

将 autoSpy 与 ng-mocks 一起使用时,如何重置 jasmine 间谍调用?

将 html ngModel 值传递给服务 --Angular

包 '@angular/cli' 不是依赖项

Angular 4.3 HttpClient:拦截响应

如何在Angular 6中通过`ng serve`设置环境

ng add 与 npm install 在 Angular 6 中的区别

视频教程

Angular7 - 12、数据双向绑定ngmodel 更多视频教程 »