2016-05-18 3 views
2

я не понимаю разницы между этим двумя @Directive и директивами: [HeroAppMainComponent] В этом случае нижеКакие директивы действуют в Angular 2?

@Component({ 
     selector: 'hero-app', 
     template: ` 
     <h1>Tour of Heroes</h1> 
     <hero-app-main [hero]=hero></hero-app-main>`, 
     styles: ['h1 { font-weight: normal; }'], 
     directives: [HeroAppMainComponent] 
    }) 

и ..

import { Directive, ElementRef, Input } from '@angular/core'; 
@Directive({ selector: '[myHighlight]' }) 
export class HighlightDirective { 
    constructor(el: ElementRef) { 
     el.nativeElement.style.backgroundColor = 'yellow'; 
    } 
} 

ответ

3

Чтобы быть кратким, директивы не имеют шаблон, тогда как компоненты имеют. Есть несколько видов директив:

  • директивы Атрибут: цель изменяет внешний вид или поведение DOM элемента. См. Эту страницу для получения более подробной информации: https://angular.io/docs/ts/latest/guide/attribute-directives.html.
  • Структурные директивы: это изменение макета DOM путем добавления и удаления элементов DOM. Они полагаются на элемент шаблона в качестве входных данных и могут использовать синтаксический ярлык/сахар для их использования. Смотрите эту страницу для более подробной информации: https://angular.io/docs/ts/latest/guide/structural-directives.html
2

Собственно директивы все еще здесь в угловом 2. Компонент только наиболее важный типа директивы, но не единственный. Компонент - это директива с шаблоном. Но вы все равно можете писать директивы стиля декоратора, в которых нет шаблонов. Здесь у нас нет функции .directive, как в Angular 1, вместо этого у нас есть простые классы, которые аннотируются, чтобы дать им определенное поведение. Аннотации для импорта Компонента:

import {Component} from 'angular2/core'; 
Смежные вопросы