是什么成分和指令之间的区别？ [英] What is the difference between component and directive?

问题描述

我刚开始用角2.工作我想知道什么是角2组件和指令之间的区别是什么？

I have just started working with Angular 2. I am wondering what are the differences between components and directives in angular 2?

感谢

推荐答案

基本上有在angular2三种指令根据文档。

Basically there are three types of directives in angular2 according to documentation.

• 组件


• 结构指令


• 属性指令

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

is also a type of directive with template,styles and logic part which is most famous type of directive among all in angular2. In this type of directive you can use other directives whether it is custom or builtin in the @component annotation like following:

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

在您的视图使用此指令：

use this directive in your view as:

<my-app></my-app>

该组件指令我已经找到最好的教程这里

如* ngFor和* ngIf用于修改通过添加和移除DOM元素的DOM布局。 这里解释

like *ngFor and *ngIf used for changes the DOM layout by adding and removing DOM elements. explained here

被用来通过应用一些函数/逻辑给定制行为或风格在已有的元素。像ngStyle是属性指令，动态地给予风格的元素。我们可以创造我们自己的指令，并以此作为pdefined一些$ P $或自定义元素的属性，这里是简单指令的例子：

are used to give custom behaviour or style to the existing elements by applying some functions/logics. like ngStyle is a attribute directive to give style dynamically to the elements. we can create our own directive and use this as Attribute of some predefined or custom elements, here is the example of simple directive:

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

firstly we have to import directive from angular2/core

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

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

和我们在视图中使用这种类似如下：

and we have to use this in the view like below:

<span Icheck>HEllo Directive</span>

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

for more info you can read the official tutorial here and here

这篇关于是什么成分和指令之间的区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！