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

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

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

从'angular2/core'导入{Component}
从“/Prueba”导入{Prueba}
@组成部分({
选择器：“我的应用程序”，
提供者：[]，
模板：`
你好{{name}
`,
指令：[普鲁巴]
})
导出类应用程序{
构造函数（）{
this.name='Angular2'
}
}

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

所以下一步，我想有几个组件，这样我就可以有Prueba和另外一个添加额外内容的组件（对于初学者来说，是另一个“短语”，但想法是添加类似的内容：）。然而，我发现自己找不到正确的语法，我尝试的任何东西都会使这个简单的示例失败

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

如果我仍然没有充分地解释我自己，这就是我所说的理论概念：

---

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

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

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

一个组件可以使用其选择器在另一个组件中使用。您需要在容器组件的

指令

属性中明确定义它。虽然该属性称为

指令

，但您可以将组件和指令都放入其中。您还可以向组件提供参数并对其事件作出反应

以下是一个示例：

• 子组件

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

  @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>
        <sub></sub>
      </div>
    `,
    directives: [ SubComponent, AnotherComponent ]
  })
  export class ContainerComponent {
  }
  

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

  ---

  问题是什么还不清楚。你所说的“如果我去掉它，它就不起作用了”到底是什么意思。如果删除“”或“指令：[Prueba]”？您真正想做什么？你犯了什么错误？很抱歉你是对的，不清楚@ThierryTemplier。我的意思是，如果我将Prueba从“指令：[Prueba]”中删除，它将不会显示任何内容（据我所知，这是意料之中的）。我真正想做的@PardeepJain是能够将我显示的日历添加到现有项目中，因为我知道它确实有效。我发现自己无法做到这一点，就我所知，这是因为指令（当时，这真的不应该是问题，因为我发现的少量文档指向指令是一个数组，所以它应该接受多个指令）。这是我看到的您的出发点。我知道其中一些（因为文档），但不是全部，我想我有办法更好地掌握它，所以谢谢！若可以在给定组件上添加多个指令，那个么问题一定在其他地方。不客气！是的，您可以在一个组件中拥有/使用多个组件/指令…Angular 4中似乎不再存在

  directives

  属性。

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

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