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中看到组件内部有一个指令，如果我删除它不起作用。我不是百分百肯定为什么，但这是我学习的方式。

下一步，我想要有几个组件，所以我可以让Prueba和另一个添加额外的东西（对于初学者，另一个“短语”，但想法是添加类似于此的东西：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 {
}

如何将几个指令添加到单个组件

1 个答案: