90

I have just started working with Angular 2.

I was wondering what are the differences between components and directives in Angular 2?

4

7 回答 7

114

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

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

零件

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

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

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

<my-app></my-app>

对于组件指令，我在这里找到了最好的教程。

结构性指令

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

属性指令

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

首先，我们必须从@angular/core

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

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

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

<span Icheck>HEllo Directive</span>

有关更多信息，您可以在此处和此处阅读官方教程

于 2016-01-05T16:11:41.080 回答
66

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

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

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

于 2016-01-05T13:44:28.140 回答
8

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

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

于 2016-01-05T13:53:18.847 回答
6

这是实际的定义。

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

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

于 2018-07-17T15:03:18.497 回答
3

概括：

组件是具有关联视图（即要呈现的 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。
于 2018-11-08T21:27:35.643 回答
2

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

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

对于良好的实践，组件类用于将数据绑定到相应的视图。双向数据绑定是 Angular 框架提供的一个很棒的特性。

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

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

其他两个指令是

  1. 结构指令——通过添加和移除 DOM 元素来改变 DOM 布局。例如： NgFor和NgIf。

  2. 属性指令——更改元素、组件或其他指令的外观或行为。前任： NgStyle

于 2017-06-02T09:06:36.290 回答
0

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

属性指令：

属性指令是能够修改单个元素的行为或外观的类。要创建属性指令，请将@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指令，它可以应用于任何数据模型属性和任何表单元素，而无需考虑数据或元素的用途。

相比之下，组件与其模板的内容密切相关。组件提供数据和逻辑，这些数据和逻辑将被应用于模板中的 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;
}

从官方角度

来自 Pro-Angular 书

于 2019-05-26T09:11:24.610 回答