我刚开始使用Angular 2.
我想知道Angular 2中的组件和指令之间有什么区别?
根据文档,在angular2中基本上有三种类型的指令.
零件
结构指令
属性指令
零件
也是一种带有模板,样式和逻辑部分的指令,它是angular2中最着名的指令类型.在这种类型的指令中,您可以使用其他指令,无论它是@component注释中的自定义还是内置,如下所示:
@Component({ selector: "my-app" directives: [custom_directive_here] })
在您的视图中使用此指令:
对于组件指令,我在这里找到了最好的教程.
结构指令像*ngFor和*ngIf用于通过添加和删除DOM元素来更改DOM布局.在这里解释
属性指令用于通过应用某些函数/逻辑为现有元素提供自定义行为或样式.像ngStyle是一个属性指令,可以动态地为元素提供样式.我们可以创建自己的指令并将其用作某些预定义或自定义元素的属性,这里是简单指令的示例:
首先,我们必须从angular2/core导入指令
import {Directive, ElementRef, Renderer, Input} from '@angular/core'; @Directive({ selector: '[Icheck]', }) export class RadioCheckbox { // custom logic here... }
我们必须在以下视图中使用它:
HEllo Directive
有关更多信息,您可以在这里和这里阅读官方教程
组件有自己的视图(HTML和样式).指令只是添加到现有元素和组件的"行为".
Component
延伸Directive
.
因此,主机元素上只能有一个组件,但有多个指令.
结构指令是应用于元素的指令,用于添加/删除内容(标记模板).该
*
指令中的应用,如*ngIf
导致一个标签隐式地创建.
为了完成君特所说的,我们可以区分两种指令:
通过添加或删除元素来更新DOM布局的结构.两个常见的是NgFor
和NgIf
.这些与模板概念相关联,必须以a为前缀*
.有关详细信息,请参阅此链接中的"模板和*"部分:http://victorsavkin.com/post/119943127151/angular-2-template-syntax
该属性的人,更新它们所连接的一个元素的外观的行为.
希望它对你有帮助,蒂埃里