组件和指令有什么区别？

Question

我刚刚开始使用 Angular 2.

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

Answer 1

组件有自己的视图（HTML 和样式）。指令只是 "behavior" 添加到现有元素和组件。
Component 扩展 Directive.

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

结构指令是应用于 <template> 元素并用于 add/remove 内容（标记模板）的指令。 *ngIf 等指令应用程序中的 * 会导致隐式创建 <template> 标记。

Answer 2

为了完成 Günter 所说的，我们可以区分两种指令：

structural ones that updates the DOM layout by adding or removing elements. The two common ones are NgFor and NgIf. These ones are linked to the template concept and must be prefixed by an *. See the section "Templates and *" in this link for more details: http://victorsavkin.com/post/119943127151/angular-2-template-syntax
attribute ones 更新它们所附加的元素的外观行为。

希望对你有帮助，蒂埃里

Answer 3

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

组件
结构指令
属性指令

组件

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

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

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

<my-app></my-app>

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

结构指令

与 *ngFor 和 *ngIf 类似，用于通过添加和删除 DOM 元素来更改 DOM 布局。 explained here

属性指令

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

首先我们必须从 @angular/core

导入指令

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

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

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

<span Icheck>HEllo Directive</span>

更多信息可以阅读官方教程here and here

Answer 4

Angular 2 遵循 component/Service 架构模型。

一个angular 2 应用程序是由组件组成的。组件是 HTML 模板和控制屏幕一部分的组件 class （打字稿 class ）的组合。

为了良好实践，组件 class 用于数据绑定到相应的视图。双向数据绑定是 angular 框架提供的一项重要功能。

使用提供的选择器名称，组件可在您的应用程序中重复使用。

组件也是一种带有模板的指令。

另外两个指令是

结构指令——通过添加和删除 DOM 元素来更改 DOM 布局。例如：NgFor 和 NgIf.
属性指令—更改元素、组件或其他指令的外观或行为。例如：NgStyle

Answer 5

这里是实际的定义。

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

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

Answer 6

总结：

组件是具有关联视图的指令（即 HTML 将被渲染）。所有组件都是指令，但并非所有指令都是组件。指令分为三种类型：

组件：具有关联行为的视图。这种类型的指令实际上添加了DOM个元素
属性指令：可以附加到 DOM 元素（和组件，因为它们是 DOM 元素）以修改元素的外观或行为.
结构指令：可以附加到 DOM 元素（和组件，因为它们是 DOM 元素）以修改 DOM 布局.结构指令以 * 开头，实际上添加或删除 DOM 元素。例如 *ngIf 可以插入或删除 DOM 元素（或 angular 组件，它是自定义 DOM 元素，但仍然是 DOM 元素）。

示例：

import { Component, HostListener, HostBinding, Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
 }
}

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf='myBool' appHighlight>Hi there</div>
  `,
  styleUrls: ['./app.component.scss'],
})
export class AppComponent  {

  myBool:boolean = true;

}

在上面的示例中，我们可以观察到以下内容：

组件 AppComponent 有一个带有 <div> 元素的模板，您好。
属性指令 HighlightDirective 位于 <div> 元素上。这意味着它将操纵 <div> 元素的行为。在这种情况下，它将突出显示文本并将其变为黄色。
结构指令 *ngIf 也位于 <div> 元素上，并将确定是否要插入该元素。 <div> 将有条件地显示，具体取决于表达式 myBool 是否可以强制转换为 true.

Answer 7

其实组件也是指令，只是它们之间有区别

Attribute Directives :

属性指令是 class 能够修改单个元素的行为或外观的指令。要创建属性指令，请将 @Directive 应用于 class.

import { Directive, ElementRef } from "@angular/core";

@Directive({
     selector: "[custom-attr]", })

export class CustomAttrDirective {

   constructor(element: ElementRef) {
      element.nativeElement.classList.add("bg-success", "text-white");    
   } 
}

添加指令属性template.html文件

<tr *ngFor="let item of getProducts(); let i = index" custom-attr>
   <td>{{i + 1}}</td>
   <td>{{item.name}}</td>
</tr>

Structural Directives :

结构指令通过添加和删除元素来更改 HTML 文档的布局，如 micro-templates。结构指令允许根据表达式的结果有条件地添加内容，例如 *ngIf 或为数据源中的每个对象重复相同的内容，例如 *ngFor.

您可以将 built-in 指令用于常见任务，但编写自定义结构指令可以为您的应用程序定制行为。

<p *ngIf="true">
  Expression is true and ngIf is true.
  This paragraph is in the DOM.
</p>
<p *ngIf="false">
  Expression is false and ngIf is false.
  This paragraph is not in the DOM.
</p>

Components :

组件是它们自己模板的指令，而不是依赖于从其他地方提供的内容。组件可以访问所有指令功能，仍然有一个宿主元素，仍然可以定义输入和输出属性，因此 on.But 它们还定义了自己的内容。

很容易低估模板的重要性，但是属性和结构指令有局限性。指令可以做有用且强大的工作，但它们对应用它们的元素没有太多洞察力。指令在作为 general-purpose 工具时最有用，例如 ngModel 指令，它可以应用于任何数据模型属性和任何表单元素，而不管数据或元素是什么正在用于.

相比之下，组件与其模板的内容紧密相关。组件提供将由应用于模板中 HTML 元素的数据绑定使用的数据和逻辑，这些数据和逻辑提供用于评估数据绑定表达式的上下文，并充当指令与其余部分之间的粘合剂的应用程序。组件也是一种有用的工具，可以将大型 Angular 项目分解为可管理的块。

import { Component, Input } from '@angular/core';

import { Hero } from './hero';

@Component({
  selector: 'app-hero-child',
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
  `
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

from official angular

from Pro-Angular book

组件和指令有什么区别？

What is the difference between component and directive?

components

angular-directive

angular2-directives

angular

组件

结构指令

属性指令

总结：

示例：