javascript – 你能在Angular 2中拥有一个独立的指令吗?

我正在玩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');
     }
}

的index.html

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

我希望Div能够在Slider中保留内容hello世界. AFAIK,它应该如何工作,基于我一直在阅读有关Transclusion的内容.但控制台错误是:

Error: The component Slider has 1 <ng-content> elements, but only 0 slots were provided.
最佳答案
应该工作,除了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

转载注明原文:javascript – 你能在Angular 2中拥有一个独立的指令吗? - 代码日志