当前位置:  开发笔记 > 前端 > 正文

组件和指令有什么区别?

如何解决《组件和指令有什么区别?》经验,为你挑选了3个好方法。

我刚开始使用Angular 2.

我想知道Angular 2中的组件和指令之间有什么区别?



1> Pardeep Jain..:

根据文档,在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

有关更多信息,您可以在这里和这里阅读官方教程



2> Günter Zöchb..:

组件有自己的视图(HTML和样式).指令只是添加到现有元素和组件的"行为".
Component延伸Directive.

因此,主机元素上只能有一个组件,但有多个指令.

结构指令是应用于