我刚刚开始使用Angular 2.我想知道角度2中的组件和指令之间有什么区别？组件和指令有什么区别？

感谢

2016-01-05 uksz

这是在文档的[属性指令（https://angular.io/docs/ts/latest/guide/attribute-directives.html）页上说明的，第一部分， “指令概述”。 –

[@Directive v/s @Component in angular2]可能重复（http://stackoverflow.com/questions/32680244/directive-v-s-component-in-angular2） – John

基本上有在angular2根据文件有三种类型指令。

组件
结构指令
属性指令

组件

也是一种与模板，风格和逻辑部分指令这是在所有最有名的类型指令在angular2中。在这种类型的指令也可以使用其他指令，无论是定制或在注解@Component像内建以下：

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

使用这个指令在您的视图：

<my-app></my-app>

的组件指令我发现最好的教程here.

结构指令

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

属性指令

用于通过施加一些功能/逻辑，得到自定义行为或样式到现有的元件。像ngStyle是一个属性指令，动态地为元素赋予样式。我们可以创建自己的指令，并以此作为一些预定义或自定义元素的属性，这里是简单指令的例子：

首先，我们必须从angular2 /核心

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

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

导入指令，然后我们有在视图中使用象下面这样：

<span Icheck>HEllo Directive</span>

更多的信息，你可以阅读官方教程here和here

来源

2016-01-05 16:11:41

组件都有自己的观点（HTML和样式）。指令只是添加到现有元素和组件中的“行为”。
Component延伸Directive。

由于这个原因只能有一个主元件上的一个部件，但多个指令。

结构指令是施加到<template>元件和用于添加/删除内容（加盖模板）指令。指令中应用的*像*ngIf导致隐式地创建一个<template>标签。

来源

2016-01-05 13:44:28

要完成什么冈特说，我们可以区分指令两种：

通过添加或删除元素更新DOM布局structural ones。两种常见的是NgFor和NgIf。这些与模板概念相关联，并且必须以*为前缀。请参阅此链接的部分“模板和*”的更多详细信息：http://victorsavkin.com/post/119943127151/angular-2-template-syntax
，更新它们所连接的一个元素的外观的行为attribute ones。

希望它可以帮助你，蒂埃里

来源

2016-01-05 13:53:18

没有看到属性指令的目的。他们提供什么超越CSS？ –

@TimMcNamara，Angular指令可以有逻辑/方法，因此你可以使用attribute指令来做更多的事情，而不仅仅是使用CSS。您可以将某些父级属性值传递给属性指令，并根据该属性值使元素显示或行为不同。 –

你可以在这里找到一个很好的例子：https://angular.io/docs/ts/latest/guide/attribute-directives.html –

Angular 2遵循体系结构的组件/服务模型。

角2应用程序由组件组成。组件是HTML模板和控制屏幕一部分的组件类（A typescript类）的组合。

对于良好的做法，组件类用于数据绑定到相应的视图。双向数据绑定是角框架提供的一项重要功能。

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

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

其它两个指令是通过添加和删除的DOM元素

结构指令-改变DOM布局。例如：NgFor和NgIf。
属性指令 - 更改元素，组件或其他指令的外观或行为。例：NgStyle

来源

2017-06-02 09:06:36

组件和指令有什么区别？

回答

组件

结构指令

属性指令

相关问题