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

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 和另一个添加一些额外的东西（对于初学者，另一个 "phrase"，但我的想法是添加类似于这个的东西：http://plnkr.co/edit/SVPNwk?p=preview）。但是我发现自己无法找到正确的语法，我尝试的任何事情都会让这个简单的例子失败。

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

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

angular.io/docs/ts/latest/cheatsheet.html（我不能 post 超过两个链接...无论如何它的 @Component 部分，这就是我的文档签出）。

Answer 1

在 Angular2 中，组件和指令之间存在差异：

一个组件收集了一个视图（模板），具有一些属性和处理（组件class）
有两种指令：
- 属性指令。它改变 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 {
}

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

How to add several directives to a single component

javascript

typescript

plunker

angular