首页 文章

@Directive v / s @Component in Angular

提问于
浏览 次
308

Angular中 @Component 和 @Directive 有什么区别？他们两个似乎都做同样的任务，并具有相同的属性 .

什么是用例以及何时优先使用另一个？

javascript angular typescript

6 回答

  • 4

    组件是一个带有模板的指令， @Component 装饰器实际上是一个扩展了面向模板的功能的 @Directive 装饰器 .

    回复于
  • 407

    A @Component requires a view whereas a @Directive does not.

    指令

    我将@Directive比作Angular 1.0指令，选项为restrict：'A'（指令不限于属性用法 . ）指令将行为添加到现有DOM元素或现有组件实例 . 指令的一个示例用例是记录元素上的单击 .

    import {Directive} from '@angular/core';

@Directive({
    selector: "[logOnClick]",
    hostListeners: {
        'click': 'onClick()',
    },
})
class LogOnClick {
    constructor() {}
    onClick() { console.log('Element clicked!'); }
}

    哪个会像这样使用：

    <button logOnClick>I log when clicked!</button>

    组件

    组件（而不是添加/修改行为）实际上创建了自己的具有附加行为的视图（DOM元素的层次结构） . 一个示例用例可能是联系卡组件：

    import {Component, View} from '@angular/core';

@Component({
  selector: 'contact-card',
  template: `
    <div>
      <h1>{{name}}</h1>
      <p>{{city}}</p>
    </div>
  `
})
class ContactCard {
  @Input() name: string
  @Input() city: string
  constructor() {}
}

    哪个会像这样使用：

    <contact-card [name]="'foo'" [city]="'bar'"></contact-card>

    ContactCard 是一个可重用的UI组件，我们可以在应用程序的任何位置使用它，甚至在其他组件中也可以使用 . 这些基本上构成了我们应用程序的UI构建块 .

    总结

    如果要使用自定义行为创建可重用的UI DOM元素集，请编写组件 . 如果要编写可重用行为以补充现有DOM元素，请编写指令 .

    资料来源：

    回复于
  • 61

    在编程上下文中，指令为编译器提供指导，以改变它以其他方式处理输入的方式，即改变某些行为 .

    “指令允许您将行为附加到DOM中的元素 . ”

    指令分为3类：

    • 属性

    • 结构

    • 组件

    是的，在Angular 2中，组件是一种指令 . 根据文件，

    “角度组件是指令的子集 . 与指令不同，组件始终具有模板，并且每个模板中的元素只能实例化一个组件 . “

    Angular 2组件是 Web Component 概念的实现 . Web组件由几种不同的技术组成 . 您可以将Web Components视为使用开放Web技术创建的可重用用户界面小部件 .

    • 所以在摘要指令中我们将 behavior 附加到DOM中的元素的机制，包括结构，属性和组件类型 .

    • 组件是指令的特定类型，它允许我们使用 web component functionality AKA可重用性 - 在我们的应用程序中可用的封装的，可重用的元素 .

    回复于
  • 18

    Components

    • 要注册组件，我们使用 @Component 元数据注释 .

    • Component是一个指令，它使用shadow DOM创建称为组件的封装可视行为 . 组件通常用于创建UI小部件 .

    • Component用于将应用程序拆分为更小的组件 .

    • 每个DOM元素只能存在一个组件 .

    • @View decorator或templateurl模板在组件中是必需的 .

    Directive

    • 要注册指令，我们使用 @Directive 元数据注释 .

    • 指令用于向现有DOM元素添加行为 .

    • 指令用于设计可重复使用的组件 .

    • 每个DOM元素可以使用许多指令 .

    • 指令不使用View .

    资料来源：

    http://www.codeandyou.com/2016/01/difference-between-component-and-directive-in-Angular2.html

    回复于
  • 2

    在Angular 2及更高版本中，“一切都是组件 . ”组件是我们在页面上构建和指定元素和逻辑的主要方式，通过自定义元素和为现有组件添加功能的属性 .

    http://learnangular2.com/components/

    但是Angular2中有哪些指令呢？

    属性指令将行为附加到元素 . Angular中有三种指令：带有模板的组件指令 . 结构指令 - 通过添加和删除DOM元素来更改DOM布局 . 属性指令 - 更改元素，组件或其他指令的外观或行为 .

    https://angular.io/docs/ts/latest/guide/attribute-directives.html

    那么在Angular2及以上版本中发生的是 Directives 是为 elements 和 components 添加功能的属性 .

    从Angular.io看下面的示例：

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

@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

    它的作用是什么，它将通过添加黄色背景扩展您的组件和HTML元素，您可以使用它如下所示：

    <p myHighlight>Highlight me!</p>

    但组件将创建具有以下所有功能的完整元素：

    import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <div>Hello my name is {{name}}. 
      <button (click)="sayMyName()">Say my name</button>
    </div>
   `
})
export class MyComponent {
  name: string;
  constructor() {
    this.name = 'Alireza'
  }
  sayMyName() {
    console.log('My name is', this.name)
  }
}

    你可以使用它如下：

    <my-component></my-component>

    当我们在HTML中使用标记时，将创建此组件并调用和呈现构造函数 .

    回复于
  • 47

    更改检测

    只有 @Component 可以是变更检测树中的节点 . 这意味着您无法在 @Directive 中设置 ChangeDetectionStrategy.OnPush . 尽管如此，指令可以具有 @Input 和 @Output 属性，您可以从中注入和操作主机组件的 ChangeDetectorRef . 所以当你使用Components时需要对更改检测树进行精细控制 .

    回复于

相关问题