如何向单个组件添加多个指令

Question

你好，首先我必须说对不起，但我不知道如何更好地表达这个问题，这就是我无法自己找到答案的原因。

我说的是如何将一个组件加载到另一个组件中，我需要在指令中指出它。这是我从头开始做的一个非常小的示例，因为我无法找到正确的语法：

http://plnkr.co/edit/gFsqGJmmayOsewL3EfLf

import {Component} from 'angular2/core'
import {Prueba} from './prueba'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <prueba></prueba>      
    </div>
  `,
  directives: [Prueba]
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }
}

正如您在 app.ts 中看到的那样，组件内部有一个指令，如果我删除它就不起作用。我不是 100% 确定为什么，但这是我学到的。

所以下一步，我想要有几个组件，所以我可以有 Prueba 和另一个添加一些额外的东西（对于初学者来说，另一个“短语”，但我的想法是添加类似于 THIS 的东西：http://plnkr.co/edit/SVPNwk?p=preview）。但是我发现自己找不到正确的语法，任何尝试都会使这个简单的示例失败。

正如我所说，我不明白我错过了什么，我有一个新组件，我导入它，我使用选择器等等，但它只是爆炸了。我缺少什么概念？

如果我对自己的解释还不够恰当，这就是我所说的理论概念：

angular.io/docs/ts/latest/cheatsheet.html（我不能发布两个以上的链接......无论如何它是@Component 部分，这是我正在检查的文档）。

Answer 1

在Angular2中，组件和指令是有区别的：

• 组件收集具有一些属性和处理（组件类）的视图（模板）
• 有两种指令：
  • 属性指令。它改变了 DOM 元素的外观或行为
  • 结构性指令。它通过添加和删除 DOM 元素来更改 DOM 布局。

一个组件可以使用它的选择器在另一个组件中使用。您需要在容器组件的directives 属性中显式定义它。尽管该属性称为directives，但您可以将组件和指令都放入其中。您还可以为组件提供参数并对其事件做出反应。

这是一个示例：

• 子组件

  @Component({
    selector: 'sub',
    template: `
      <div>Sub</div>
    `
  })
  export class SubComponent {
  }
  

• 容器组件：

  @Component({
    selector: 'comp',
    template: `
      <div>
        <sub></sub>
      </div>
    `,
    directives: [ SubComponent, AnotherComponent ]
  })
  export class ContainerComponent {
  }
  

指令将应用于同样基于它的选择器的现有元素。

这是一个示例：

• 子组件

  @Directive({
    selector: '[dir]'
  })
  export class DirDirective {
    constructor(el: ElementRef) {
      // el.nativeElement corresponds to the DOM element
      // the directive applies on
      el.nativeElement.style.backgroundColor = 'yellow';
    }
  }
  

• 容器组件：

  @Component({
    selector: 'comp',
    template: `
      <div dir>Some text</div>
    `,
    directives: [ DirDirective ]
  })
  export class ContainerComponent {
  }
  

directives 属性

更多地介绍directives 属性。如果组件/指令不是平台的，则需要在此指令中显式定义。否则，组件/指令将不适用。

这个属性可以接受多个值，因为它是一个数组：

@Component({
  selector: 'comp',
  template: `
    <div>
      <sub></sub>
      <another></another>
    </div>
  `,
  directives: [ SubComponent, AnotherComponent ]
})
export class ContainerComponent {
}