Question

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

我们假设我们有两个@Directive

HighLightDirective
UnderlineDirective

如何创建实现这两个@Component的{{1}}？

@Directive

PS：我知道我可以通过更改下面的组件模板来完成此操作。是否存在更优雅的东西？

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

Answer 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]。

Answer 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
}

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

＆＃34;自动＆＃34;将这些指令应用于组件模板，恕我直言，在模板中将它们应用到模板中并没有什么不优雅，而且任何东西都更优雅＆＃34;将按比例不太清楚。无论如何，不，没有其他选择，做你在这里做的事情是完全惯用的。

这是假设您的实际用例比此问题更复杂，否则（因为您未在模板中添加任何新内容）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>会更优雅......但它对我来说仍然没有多大意义。

Angular2：由倍数指令组成的组件

2 个答案: