组件和指令有什么区别？

Question

我刚开始使用Angular 2.

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

Answer 1

根据文档,在angular2中基本上有三种类型的指令.

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

零件

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

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

在您的视图中使用此指令:

<my-app></my-app>

对于组件指令,我在这里找到了最好的教程.

结构指令

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

属性指令

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

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

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

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

我们必须在以下视图中使用它:

<span Icheck>HEllo Directive</span>

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

Answer 2

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

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

结构指令是应用于<template>元素的指令,用于添加/删除内容(标记模板).该*指令中的应用,如*ngIf导致一个<template>标签隐式地创建.

Answer 3

为了完成君特所说的,我们可以区分两种指令:

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

希望它对你有帮助,蒂埃里

Answer 4

这是实际的定义。

• 如果它有一个模板，它就是一个组件
• 否则，如果它在括号“[likethis]”中有一个选择器，则它是一个属性指令
• 否则它是一个结构指令。

任何其他定义都是错误的。