组件和指令有什么区别?

我刚刚开始使用Angular 2.我想知道angular2中的组件和指令之间有什么区别?

谢谢

根据文档,基本上在angular2中有三种types的指令。

  • 零件
  • 结构指令
  • 属性指令

零件

也是在angular2中最有名的指令types的一种指令,其中有模板,样式和逻辑部分。 在这种types的指令中,您可以使用其他指令,不pipe它是自定义还是内置在@component注释中,如下所示:

@Component({ selector: "my-app" directives: [custom_directive_here] }) 

在你的视图中使用这个指令:

 <my-app></my-app> 

对于组件指令,我已经在这里find了最好的教程。

结构指令

像* ngFor和* ngIf用于通过添加和删除DOM元素来更改DOM布局。 在这里解释

属性指令

用于通过应用一些函数/逻辑给现有的元素提供自定义的行为或风格。 像ngStyle是一个属性指令,dynamic给元素的样式。 我们可以创build自己的指令,并将其用作一些预定义或自定义元素的属性,下面是简单指令的示例:

首先我们必须从angular2 / core导入指令

 import {Directive, ElementRef, Renderer, Input} from 'angular2/core'; @Directive({ selector: '[Icheck]', }) export class RadioCheckbox { custom logic here,,,, } 

我们必须在如下所示的视图中使用它:

 <span Icheck>HEllo Directive</span> 

欲了解更多信息,你可以阅读官方教程这里和这里

组件有自己的视图(HTML和样式)。 指令只是添加到现有元素和组件中的“行为”。
Component扩展了Directive

为了完成Günter所说的,我们可以区分两种指令:

  • 通过添加或删除元素来更新DOM布局的结构元素。 两个常见的是NgForNgIf 。 这些链接到模板概念,必须以*为前缀。 有关更多详细信息,请参阅此链接中的“模板和*”部分: http : //victorsavkin.com/post/119943127151/angular-2-template-syntax
  • 属性更新他们所连接的元素的外观行为的属性之一。

希望它能帮助你,Thierry

Angular 2遵循体系结构的组件/服务模型。

angular2应用程序由组件组成。 组件是HTML模板和控制屏幕一部分的组件类(A typescript类)的组合。

对于良好的实践,组件类用于数据绑定到相应的视图。 双向数据绑定是angular框架提供的一个重要特性。

组件可以使用提供的select器名称在应用程序中重用。

组件也是一种带有模板的指令。

其他两个指令是

  1. 结构指令 – 通过添加和删除DOM元素来更改DOM布局。 例如: NgForNgIf

  2. 属性指令 – 改变元素,组件或其他指令的外观或行为。 例如: NgStyle