组件和指令有啥区别？

Posted 2023-02-22

【中文标题】组件和指令有啥区别？

【英文标题】：What is the difference between component and directive?组件和指令有什么区别？

【发布时间】：2016-04-09 08:37:19

【问题描述】：

我刚刚开始使用 Angular 2。

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

【问题讨论】：

这在Attributes Directives 页面上的文档中进行了解释，第一部分“指令概述”。

@Directive v/s @Component in angular2的可能重复

【参考方案1】：

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

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

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

【参考方案2】：

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

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

希望对你有帮助 蒂埃里

【讨论】：

看不到属性指令的用途。除了 CSS，他们还提供什么？

@TimMcNamara，Angular 指令可以有逻辑/方法，因此您可以使用属性指令比仅使用 CSS 做更多的事情。您可以将某些父属性值传递给属性指令，并根据该属性值使元素出现或表现不同。

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

【参考方案3】：

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

组件 结构指令 属性指令

组件

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

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

在你的视图中使用这个指令：

<my-app></my-app>

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

结构指令

如*ngFor 和*ngIf，用于通过添加和删除DOM 元素来改变DOM 布局。 explained here

属性指令

它们用于通过应用一些功能/逻辑来为现有元素提供自定义行为或样式。就像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和here

【讨论】：

“router-outlet”指令属于哪一种？它与 IMO 以上三种类型都不匹配。

这是一个很好的教程：dev6.com/angular/angular-2-the-three-types-of-directives

【参考方案4】：

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

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

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

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

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

另外两个指令是

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

属性指令—更改元素、组件或其他指令的外观或行为。例如：NgStyle

【参考方案5】：

这是实际的定义。

如果它有一个模板，它就是一个

组件

否则，如果它有一个括号中的选择器“[likethis]”，它是一个

属性指令

否则它是一个

结构指令

。

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

【讨论】：

您是在定义它们的出现，而不是它们是什么。

我是在定义它们是什么，而不是就应该如何使用它们发表意见。

【参考方案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 有条件地显示。

【参考方案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 指令，它可以应用于任何数据模型属性和任何表单元素，而无需考虑数据或元素的用途。

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