组件和指令之间有什么区别？

Question

我刚刚开始使用Angular 2。

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

Answer 1

为了补充君特所说的，我们可以区分两种指令:

• 通过添加或删除元素来更新DOM布局的结构化元素。两种常见的方法是NgFor和NgIf。这些都与模板概念相关联，并且必须以＜code＞*＜/code＞作为前缀。有关更多详细信息，请参阅此链接中的“模板和*”部分：http://victorsavkin.com/post/119943127151/angular-2-template-syntax
• 属性更新它们所附着的元素的外观行为

希望对你有帮助，泰瑞

Answer 2

组件有自己的视图（HTML和样式）。指令只是添加到现有元素和组件的“行为”
组件扩展了指令。

因此，宿主元素上只能有一个组件，但有多个指令。

结构指令是应用于＜code＞的指令

Answer 3

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

它也是一种带有模板、样式和逻辑部分的指令类型，这是Angular2中最著名的指令类型。在这种指令类型中，您可以使用其他指令，无论是自定义指令还是内置于＜code＞组件＜/code＞注释中，如下所示：

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

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

<my-app></my-app>

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

首先，我们必须从@angular/核心导入指令

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

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

我们可以在视图中使用此选项，如下所示：

<span Icheck>HEllo Directive</span>

更多信息，你可以在这里和这里阅读官方教程