组件和指令有什么区别?
我刚刚开始使用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布局的结构元素。 两个常见的是
NgFor
和NgIf
。 这些链接到模板概念,必须以*
为前缀。 有关更多详细信息,请参阅此链接中的“模板和*”部分: http : //victorsavkin.com/post/119943127151/angular-2-template-syntax - 属性更新他们所连接的元素的外观行为的属性之一。
希望它能帮助你,Thierry
Angular 2遵循体系结构的组件/服务模型。
angular2应用程序由组件组成。 组件是HTML模板和控制屏幕一部分的组件类(A typescript类)的组合。
对于良好的实践,组件类用于数据绑定到相应的视图。 双向数据绑定是angular框架提供的一个重要特性。
组件可以使用提供的select器名称在应用程序中重用。
组件也是一种带有模板的指令。
其他两个指令是
-
结构指令 – 通过添加和删除DOM元素来更改DOM布局。 例如:
NgFor
和NgIf
。 -
属性指令 – 改变元素,组件或其他指令的外观或行为。 例如:
NgStyle