我刚刚开始使用Angular 2。
我想知道Angular 2中的组件和指令之间有什么区别？
在“属性指令”页面上的文档的第一部分“指令概述”中对此进行了说明。
—
Mark Rajcok'1
我刚刚开始使用Angular 2。
我想知道Angular 2中的组件和指令之间有什么区别？
Answers:
根据文档，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>
组件具有自己的视图（HTML和样式）。指令只是添加到现有元素和组件中的“行为”。
Component延伸Directive。
因此，主机元素上只能有一个组件，而必须有多个指令。
结构伪指令是应用于<template>元素的伪指令，用于添加/删除内容（标记模板）。类似*in指令的应用程序*ngIf会导致<template>隐式创建标签。
为了完成Günter所说的，我们可以区分两种指令：
NgFor和NgIf。这些链接到模板概念，并且必须以开头*。有关更多详细信息，请参见此链接中的“模板和*”部分：http : //victorsavkin.com/post/119943127151/angular-2-template-syntax希望对您有帮助，蒂埃里
组件是具有关联视图（即要呈现的HTML）的指令。所有组件都是指令，但并非所有指令都是组件。指令分为三种：
*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>其中包含一个在其中显示的元素。<div>元素上。这意味着它将操纵<div>元素的行为。在这种情况下，它将突出显示文本并将其变为黄色。*ngIf也位于<div>元素上，它将确定是否要插入元素。在<div>将根据表达是否被有条件地示出myBool可被强制转换为true。实际上，组件也是指令，但是它们之间存在差异。
属性指令：
属性指令是能够修改单个元素的行为或外观的类。要创建属性指令，请将@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;
}