Angular2：由多个指令组成的组件答案

【问题标题】：Angular2: Component composed of multiples directivesAngular2：由多个指令组成的组件
【发布时间】：2016-06-11 03:07:31
【问题描述】：

版本：“angular2”：“2.0.0-beta.6”

我们假设我们有两个@Directive

HighLightDirective
UnderlineDirective

如何创建实现这两个@Directive 的@Component？

@Component({
    selector: 'test',
    template: '{{text}}',
    //Looking from something like that..
    //using: [HighLightDirective, UnderlineDirective]
})
export class TestComponent {
    public text:string;
    //maybe? constructor(hightlight,underline)
}

PS：我知道我可以通过更改组件模板来做到这一点，如下所示。是否存在更优雅的东西？

'<div highlight underline>{{text}}</div>'

【问题讨论】：

这正是指令的用途，以及你应该如何使用它们（：你给{{ text }} 的例子有点微不足道，因为其他所有属性指令都是很好的解决方案。你有更具体的东西吗？想好了吗？
@Sasxa 我对在我制作的每个组件上添加一个 div 容器感到很困惑。当<test>my_text</test> 看起来更容易时，它会创建<test><div>my_text</div></test> :]
在父模板中使用<test highlight underline></test>。
事实上我不想允许没有这两个指令的 TestComponent 实例，这就是为什么这个解决方案也不能工作。
我不清楚这个问题要求什么。作曲的效果应该是什么？

标签： angular

【解决方案1】：

您可以为指令和组件使用相同的选择器。

@Directive({selector: 'test'})
class HighlightDirective {
}

@Directive({selector: 'test'})
class UnderlineDirective {}

@Component({
    selector: 'test',
    directives: []
    template: '{{text}}',
    //Looking from something like that..
    //using: [HighLightDirective, UnderlineDirective]
})
export class TestComponent {
  constructor(@Self()hs:HighlightDirective, @Self()hs:UnderlineDirective) {}
}

@Component({
  selector: 'my-app',
  directives: [TestComponent,HighlightDirective, UnderlineDirective]
  template: `
  <h2>Hello</h2>
  <test></test>

`
})
export class App {

}

Plunker example

如果你想独立于组件使用指令，你可以添加多个选择器，如

@Directive({selector: 'test,highlight'})
class HighlightDirective {
}

当HighlightDirective 和UnderlineDirective 没有被应用时，构造函数抛出

  constructor(@Self()hs:HighlightDirective, @Self()hs:UnderlineDirective) {}

您也可以将指令添加到PLATFORM_DIRECTIVES

bootstrap(MyComponent, [provide(PLATFORM_DIRECTIVES, {useValue: [HighlightDirective, UnderlineDirective], multi:true})]);

将它们应用到选择器匹配的任何地方，而不是将它们添加到您要使用它们的每个组件的directives: [HighlightDirective, UnderlineDirective]。

【讨论】：

【解决方案2】：

//Looking from something like that..
//using: [HighLightDirective, UnderlineDirective]

您正在寻找的是directives 属性：

@Component({
    selector: 'test',
    template: '<div highlight underline>{{text}}</div>',
    directives: [HighLightDirective, UnderlineDirective] // don't forget to import them!
})
export class TestComponent {
    @Input() // don't forget this!
    public text:string;
    constructor() {} //no need to do anything here
}

我最初误解了您的问题，并认为您只是对要使用的元数据密钥感到困惑 - 如果您是，请参见上文。

就“自动”将这些指令应用于组件模板而言，恕我直言，在模板中应用它们并没有什么不雅之处，而且任何“更优雅”的东西都会成比例地不那么清晰。无论如何，不，别无选择，并且在这里做你正在做的事情是完全地道的。

这都是假设您的实际用例比这个问题更复杂，否则（因为您没有在模板中添加任何新内容）Component 在这里是错误的工具，您应该直接应用这两个指令。如果您真的坚决反对这样做，并且您的用例实际上就是这么简单，我想

@Component({
    selector: 'test',
    template: '<div highlight underline><ng-content></ng-content></div>',
    directives: [HighLightDirective, UnderlineDirective] 
})
export class TestComponent { }

然后您可以将其用作：<test>stuff</test> 而不是<test [text]="someVar"></test> 会更优雅...但对我来说仍然没有多大意义。

【讨论】：