角块2块

Tavish Aggarwal.

 

A

我们知道谷歌已经与角度1.x相比取得了一些重大变化。其中一个重大变化正在朝着组件驱动的框架移动。角分量是角度2带来的巨大变化之一。

 

朝向部件移动的动机

Web开发社区已经对使用产生了巨大的变化 Web组件 2009年(Angular 1在2009年发布)。

使用Web组件现在,开发人员可以制作一个非常模块化的代码。因此,谷歌实现了Web组件的力量和角框架从指令迁移到Angular 2.x中基于组件的方法。

通过基于组件的方法,我们现在可以创建具有完整功能集的独立组件,并可以在我们的应用程序中注入。

角度2.x解决了什么问题?

  1. 在Angular 1.x中早期,我们使用$ scope注入器绑定我们的模板和控制器。但现在随着组件直接与模板相关联,因此消除了需求$范围。
  2. 此外,Angular 2具有非常明确的终身循环,如oninit,onchanges和ondestroy。 (更多关于它在即将到来的帖子中)

棱角 2.x中的组件

所以现在我们有一个基本的理解组件是什么,让我们看看我们如何在Angular 2.x中创建一个组件。

为了创建一个组件,我们将其声明用特殊装饰员@Component(在未来的教程中更多装饰器)。

在Angular 2.x中创建组件的基本要求

  1. 导入组件对象
  2. 使用类型标装饰器将元数据添加到组件
  3. 导出组件
  4. bootstrap组件
  5. 在模块中包含组件

请参考下图所示的图表:

角成分

要点要记住: 

1.每个Angular 2.x应用程序应至少知道一个模块作为App模块。

2.我们声明的每个组件都必须属于一个模块。 (我们会在行动中看到这个)

现在让我们详细介绍每个步骤并进入编码。我们将创建我们的第一个功能组件。

导入组件对象

创建组件的第一步是从角核导入它。导入方式如下所示:

import { Component } from '@angular/core'

棱角 2利用ES2015模块语法。它使用导入关键字以获取在不同文件中声明的代码。

导入依赖于出口关键字。这意味着要导入组件,它也必须在文件中的某个地方导出。

使用类型标装饰器将元数据添加到组件

一旦我们从角核导入了一个组件,下一步就是使用@component装饰器声明它。一旦Angular Sees @component装饰器,它将根据我们指定的配置创建一个组件的新实例。

import { Component } from '@angular/core' 

@Component({ 
       selector: 'my-products', 
       templateURL: 'app/products/product-list.component.html' 
})

创建组件时,我们可以为组件指定各种配置。我们可以给出的最常用的配置如下所示。有关配置的完整详细信息,请参阅 角分量元数据.

  1. 选择器 - 定义创建的组件的HTML标记的名称。
  2. 提供商 - 这是我们在哪里传递的组件想要访问的地方。我将在即将到来的文章中解释更多的服务。
  3. 指令 - 当我们想要使用其他组件时,即如果此组件具有对另一个组件的依赖项,则此处已声明该组件。
  4. 在此处声明了特定于组件的样式或样式。我们还可以通过我们样式使用StyleURL声明的文件。此外,我们可以将一个样式表的数组传递给此选项。
  5. 模板或TemplateUrl - 在此处声明了特定于组件的HTML。我们还可以通过我们的HTML使用TemplateURL声明的文件。它允许我们直接绑定我们的组件和视图。请注意,我们无法在此处传递数组。

导出组件

正如我们之前看到的那样,要导入我们需要导出组件的组件。在这里,我们正在导出组件,以便我们可以将其包含在另一个文件中。

import { Component } from '@angular/core'

@Component({
    selector: 'my-products',
    templateURL: 'app/products/product-list.component.html'
})

export class ProductListComponent { }

bootstrap组件

请注意,只有使用我们创建的组件引导应用程序,才需要此步骤。如果这是第二个组件,那么我们可以跳过这一步。

如您所知,在Angular 1.x中,我们使用NG-App引导我们的应用程序。以类似的方式,我们以下面显示的方式引导我们的角度2.x应用程序。

import { bootstrap } from '@angular/platform-browser-dynamic'


bootstrap(AppComponent)

在模块中包含组件

现在我们的组件已准备就绪并已准备好使用。我们需要通过在模块文件`app.module.ts`中声明它来讲述我们希望使用组件的Angular 2.x应用程序。在声明中,我们声明了我们想要使用的组件。

请注意,我们在步骤3中导出的组件应该匹配。

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

一旦我们有组件声明,我们就可以使用`将该组件注入HTML中<my-products></my-products>“选择”在为组件创建元数据时定义的选择器。

这就是组件如何运作和使开发和测试非常容易。希望,这是有帮助的。我将在即将到来的帖子中分享有关Angular 2.x的更多信息。

作者信息

Tavish Aggarwal.

网站: http://tavishaggarwal.com

Tavish Aggarwal.是一个数据科学家 在一个海德拉巴工作,具有广泛的经验,在跨电子商务,财务,医疗保健等等不同领域解决现实世界的业务问题。 他对技术充满热情,喜欢在团队中工作。

类别