angular - 组件和指令有什么区别？

Question

我刚刚开始使用 Angular 2。

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

Answer 1

根据文档，Angular2 中基本上有三种类型的指令。

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

组件

它也是一种包含模板、样式和逻辑部分的指令类型，是 Angular2 中最著名的指令类型。在这种类型的指令中，您可以使用其他指令，无论它是自定义的还是内置在 @Component 注释中，如下所示:

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

在您的 View 中将此指令用作:

<my-app></my-app>

对于组件指令，我找到了最好的教程 here.

结构指令

像*ngFor 和*ngIf，用于通过添加和删除DOM 元素来改变DOM 布局。 explained here

属性指令

它们用于通过应用某些功能/逻辑为现有元素提供自定义行为或样式。像 ngStyle 是一个属性指令，可以动态地为元素提供样式。我们可以创建自己的指令并将其用作一些预定义或自定义元素的属性，这是一个简单指令的示例:

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

import {Directive, ElementRef, Renderer, Input} from '@angular/core';

@Directive({
  selector: '[Icheck]',
})
export class RadioCheckbox {
   // custom logic here...
}

我们可以在 View 中使用它，如下所示:

<span Icheck>HEllo Directive</span>

更多信息可以看官方教程here和 here