角度2组件

角度2组件简介

2017年9月11日 996意见
  • 在本教程中,我们将了解什么是组件和基本原理。 角度2 组件。

    什么是组件?

    角度2组件结构

    • 模板

    • 在Angular Components中包括模板,该模板对用户界面片段进行布局,以查找应用程序的视图。 Wheather用HTML创建,并定义了在页面上呈现的内容。我们在HTML中使用角度绑定和指令来启动视图。

    • 该类是与视图关联的代码。该类是使用TypeScript创建的。包含 属性:数据 可在视图中使用的属性或数据元素。
      例如,如果您想在视图中显示标题,我们为该标题定义一个class属性。
      该类还包含方法,这是视图所需逻辑的函数。

    • 元数据

    • 组件还具有元数据,该元数据提供有关组件角度的其他信息。正是此元数据将此类定义为角度组件。元数据由装饰器定义。装饰器是一种将元数据添加到类,其成员或其方法参数的函数。因此,组件是在模板中定义的视图,通过类定义的关联代码以及通过装饰器定义的元数据。

    组件类别

    如果您已经完成了使用任何语言进行的任何面向对象编程,则此代码应该看起来很熟悉。

    app.components.ts
    
    // @ AppComponent : 类 name 
    export 类 AppComponent{
    	// @ pageTitile :  property of a 类 
    	pageTitle : string = ' Components In 角度2 | 极客'; 
    }
    

    类是一种构造,它使我们可以创建一个类型,该类型的属性定义了提供功能的数据元素和方法。我们使用 关键字,后跟类名 AppComponent。通用的Angular约定是使用功能名称来命名每个组件类,然后在单词后添加后缀。同样按照惯例,应用程序的根组件称为AppComponent,如图所示。当在代码中引用组件时,该类名用作组件名。的 出口 最前面的关键字将导出此类,从而使该类可供应用程序的其他组件使用。哪里 页面标题 是一个类的属性。

    使用装饰器定义元数据

    当我们给它一个组件元数据时,一个类就会变成一个Angular组件。 Angular需要该元数据来了解如何实例化组件,构造视图以及与组件交互。我们使用Angular组件函数定义组件的元数据。在TypeScript中,我们将该函数作为装饰器附加到类上。

    • 装饰器

    • 装饰器是一种将元数据添加到类,其成员或其方法参数的函数。装饰器是在TypeScript中实现的JavaScript语言功能。装饰器的范围仅限于其装饰的功能。装饰器始终以 @ 标志。 Angular有几个内置的装饰器,我们可以用来向Angular提供其他信息。我们还可以构建自己的装饰器。

    装饰器app.components.ts
    
    @component ({
    	selector : 'pm-root',
    	template : `
    		<div>
    			<h1>{{ 页面标题 }}</h1>
    			<p> Introduction To 角度2 Component</p>
    		</div>`
    }) // no semicolon at the end of the decorator
    

    我们在类签名上方定义装饰器。请注意,装饰器的末尾没有分号。

    • 选择器:'pm-root' :
    • 如果计划在任何HTML中引用该组件,则可以指定一个选择器。选择器定义了组件的指令名称。指令只是一个自定义HTML标签。只要在HTML中使用此导向器,Angular就会渲染该组件的模板。我们将在接下来的演示中看到它的工作原理。

    • 模板:`...` :
    • 组件应始终具有模板。在这里,我们定义该组件管理的用户界面片段或视图的布局。双花括号指示数据绑定。我们将 h1 元素值的类的页面标题属性,因此当呈现此HTML时, h1 元素显示Acme产品管理。

    输入

    在使用外部函数或类之前,我们需要定义在哪里找到它。我们使用import语句来做到这一点。 import语句是ES 2015的一部分,并以TypeScript实现。 import语句使我们可以使用从外部模块导出的成员。还记得我们是如何使用export关键字导出类的吗?这意味着我们的应用程序中的其他模块可以根据需要导入导出的类。我们将在整个代码中使用import语句来导入任何第三方库,任何我们自己的模块或从Angular本身导入。
    我们可以从Angular导入,因为Angular是模块化的。它是库模块的集合。每个库本身就是一个由几个相关功能模块组成的模块。当我们需要从Angular中获取某些内容时,就可以从Angular库模块中进行导入,就像从任何其他外部模块中导入一样。

    //www.npmjs.com/~angular
    如果要查看可用的Angular库软件包及其当前版本的列表,请使用此链接。

    在我们的组件代码中,我们使用Angular中的组件装饰器函数将我们的类定义为组件。我们需要告诉Angular在哪里可以找到该函数,因此我们需要添加一个import语句,并从Angular Core中像这样导入组件。

    
       //importing the component
       import { component } from '@angular/core';
           ....
    

    我们从import关键字开始。我们在花括号内标识所需成员的名称。在这种情况下,我们需要组件装饰器函数,并定义包含该成员的模块的路径。在这种情况下,Angular Core库模块。如果我们需要同一模块中的多个成员,则可以在导入列表中将它们全部列出,并以逗号分隔。

    
      //importing Multiple component
       import { NgModule } from '@angular/core';
       import { AppComponent } from './app.component';
       import { BrowserModule } from '@angular/platform-browser';
          ....
    

    获取更多Angular 2文章 这里!

  • 标签: , , , , ,
  • 启用通知    不用了,谢谢