你可以在Angular 2中有一個獨立的指令

我正在玩Angular 2，我想要做的就是直接分配給HTML中的一個元素。這可能嗎？你可以在Angular 2中有一個獨立的指令

指令：

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>

爲什麼我問的原因是因爲我不想設定的模板與使用組件的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>

我會期待股利保持在滑塊內內容你好世界。 AFAIK這是它應該如何工作的基礎上我一直在閱讀有關Transclusion。但控制檯錯誤是：

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

來源

2016-02-08 Chris Sheppard

我真的不明白你想實現什麼的HTML模板的組成部分。聽起來像一個模板的組件，只用''做你想做的。 –

我沒有看到任何錯誤。對我來說，這看起來像一個錯誤。只是出於好奇。你能否請'

hello world

'（沒有空格或換行符）？ –

我已經更新了它，它仍然拋出一個錯誤。 –

應該只是角度模板的工作是區分大小寫的

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>`

這樣，你的分量只是顯示家長提供兒童到您的組件

來源

2016-02-08 16:51:42

嗨，'模板：''拋出一個控制檯錯誤：'錯誤：組件滑塊有1 元素，但只提供0個插槽。這很奇怪，因爲我不知道在這種情況下槽是什麼意思？我保持這個組件簡單。它被稱爲Slider，選擇器是'Slider'，在html中我有這個代碼'

hello world

'。 –

您可以使用滑塊代碼編輯您的問題，以及如何使用它？ –

我想我開始明白你的意思是獨立的 - 不是在另一個Angular組件內？AFAIK''目前不能在根組件上工作（不知道這是否計劃改變）。 –

你可以在Angular 2中有一個獨立的指令

回答

相關問題