组件

Question

我刚刚开始使用Angular 2.

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

Answer 1

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

组件
结构指令
属性指令

组件

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

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

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

<my-app></my-app>

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

结构指令

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

属性指令

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

首先我们必须从angular2 / core

导入指令

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

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

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

<span Icheck>HEllo Directive</span>

有关详情，请阅读官方教程here和here

Answer 2

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

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

结构指令是应用于<template>元素的指令，用于添加/删除内容（标记模板）。像*这样的指令应用程序中的*ngIf会导致隐式创建<template>标记。

Answer 3

要完成Günter的说法，我们可以区分两种指令：

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

希望它可以帮到你，亨利

Answer 4

Angular 2遵循架构的组件/服务模型。

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

对于良好实践，组件类用于绑定到相应视图的数据。双向数据绑定是角度框架提供的一个很好的功能。

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

Component也是一种带模板的指令。

其他两个指令是

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

Answer 5

这是实际的定义。

如果它具有 template ，则它是一个 Component
如果它在方括号中有一个选择器“ [likethis]”，则它是一个属性指令
否则它是结构指令。

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

Answer 6

摘要：

组件是具有关联视图（即要呈现的HTML）的指令。所有组件都是指令，但并非所有指令都是组件。指令分为三种：

组件：具有相关行为的视图。这种指令实际上添加了DOM元素
属性指令：可以附加到DOM元素（和组件，因为它们是DOM元素），以修改元素的外观或行为。
结构指令：可以附加到DOM元素（和组件，因为它们是DOM元素），以修改DOM布局。结构化指令以*开头，实际上是添加或删除DOM元素。例如*ngIf，它可以插入或删除DOM元素（或角度组件，它是自定义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

实际上，组件也是指令，但是它们之间存在差异。

属性指令：

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

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>

结构指令：

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

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

<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>

组件：

组件是它们自己的模板的指令，而不是依赖于其他地方提供的内容。组件可以访问所有指令功能，仍然具有宿主元素，仍然可以定义输入和输出属性，等等。但是它们也定义了自己的内容。

很容易低估模板的重要性，但是属性和结构指令具有局限性。指令可以做有用而有力的工作，但对所应用的元素了解不多。伪指令是通用工具时最有用，例如ngModel伪指令，它可以应用于任何数据模型属性和任何表单元素，而与数据或元素的用途无关。< / em>

相比之下，
组件与它们的模板内容紧密相关。组件提供了数据和逻辑，这些数据和逻辑将由应用于模板中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

组件和指令有什么区别？

7 个答案:

组件

结构指令

属性指令

摘要：

示例：