4

我正在玩 Angular 2，我想做的是有一个独立的指令直接分配给 HTML 中的一个元素。这可能吗？

指示：

import {Directive, ElementRef} from 'angular2/core';
@Directive({
    selector: '[Slidernav]'
})
export class Slidernav {
    constructor(private element: ElementRef) {
        console.log('Slider Run');
    }
}

我会将它分配给任何 HTML 元素，如下所示：

<div slidernav>Some content</div>

我问的原因是因为我不想使用 Component 使用 DOM 中已经存在的 HTML 来设置模板。

编辑

因此，根据响应，这是组件

组件滑块

 import {Component, View, ElementRef} from 'angular2/core';
 @Component({
    selector: 'Slider',
    template: '<ng-content></ng-content>'
 })
 export class Slider {
     constructor(private element: ElementRef) {
         console.log('Slider');
     }
}

索引.html

<Slider>
    <div>hello world</div>
</Slider>

我希望 Div 与内容 hello world 一起保留在 Slider 中。根据我一直在阅读的有关 Transclusion 的内容，AFAIK 这就是它应该如何工作的方式。但是控制台错误是：

Error: The component Slider has 1 <ng-content> elements, but only 0 slots were provided.
4

1 回答 1

4

应该可以工作，除了 Angular 模板区分大小写

selector: '[Slidernav]'
...
<div slidernav>Some content</div>

应该是

selector: '[Slidernav]'
...
<div Slidernav>Some content</div>

或者

selector: '[slidernav]'
...
<div slidernav>Some content</div>

除此之外，您可能希望使用带有模板的组件，例如

template: '<ng-content></ng-content>`

这样，您的组件只会显示父级作为子级提供给您的组件的 HTML

于 2016-02-08T16:51:42.747 回答