Angular2是否可以注入並創建實例或相同？

我是新來的es6，打字稿和Angular2的東西，我試過指令的例子。它看起來像下面..Angular2是否可以注入並創建實例或相同？

import { Directive, ElementRef, Input, Renderer } from '@angular/core'; 

@Directive({ selector: '[myHighlight]' }) 

export class HighlightDirective { 
    constructor(el: ElementRef, renderer: Renderer) { 
     renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'green'); 
    } 
}

，我曾嘗試以下變種，但如我所料不工作..

import { Directive, ElementRef, Input, Renderer } from '@angular/core'; 

@Directive({ selector: '[myHighlight]' }) 

export class HighlightDirective { 
    constructor() { 

    console.log(new ElementRef()) 
     //renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'green'); 
    } 
}

也試過這個..

import { Directive, ElementRef, Input, Renderer } from '@angular/core'; 

@Directive({ selector: '[myHighlight]' }) 

export class HighlightDirective { 
    constructor(ElementRef, Renderer) { 

    console.log(new ElementRef()) 
     //renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'green'); 
    } 
}

我沒有得到el：ElementRef語法和創建正常對象實例的差異新ElementrRef ..請解釋其背後的差異和邏輯和EL：在正常或ES6 JS ElementRef關係和等價..預先:)

來源

2016-11-29 shivaraj

您是否將模板文件包含在app.component.ts中，還是忘記將其導入到app.module聲明中？ – Mohanavel

朋友，我已經包括..這不是問題在這裏..第一個代碼示例正在工作，但爲什麼第二個和第三個不以同樣的方式工作..代碼示例之間有什麼區別..在第一個代碼示例究竟是什麼（el：ElementRef，renderer：Renderer）這一行正在做什麼..？ – shivaraj

由於這是角2依賴注入的基本構建石（DI）機制。簡而言之：如果您需要在您的組件參考某些服務等，您可以問問Angular通過constructor。通過constructor(el: ElementRef, renderer: Renderer)行，你基本上會問這個框架：「當你爲我構造高亮指令時，給我這兩個對象，ElementRef和Renderer。沒有它們，我作爲高亮指令就不能活了。

這兩個物體是如何獲得的？通過指令生命週期中的DI框架。我強烈建議閱讀以便更好地理解這真棒文章（這是一個必須）：http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html

在第二和第三例子（其中您constructor是空的，所以沒有什麼是注入到您的指令上創建），你不能簡單地創建ElementRef通過新（），因爲它需要更多的依賴關係，例如nativeElement，如下所述：https://angular.io/docs/js/latest/api/core/index/ElementRef-class.html 但你沒有提供這些，根本不能。

來源

2016-12-05 16:11:52

Angular2是否可以注入並創建實例或相同？

回答

相關問題