2015-12-21 19 views
17

Sto sviluppando un'applicazione Angular2. Ho bisogno di aggiungere comportamento speciale per tutti i link in modo di 1.xi angolare sarebbe solo dare una direttiva come questa:Registrazione globale di una direttiva in angular2

angular.module('whatever.module', []).directive('href', function() { 
    return { 
     restrict: 'A', 
     link: function($scope, $element, $attrs) { 
      // do stuff 
     } 
    }; 
}); 

In angular2 posso scrivere una direttiva come questa:

@Directive({ 
    selector: '[href]', 
}) 

export class MyHrefDirective { 
    constructor() { 
     // whatever 
    } 
} 

Ma come terra posso dire all'applicazione di usare quella direttiva a livello globale? Ho un sacco di punti di vista con collegamenti su di loro. Devo importarlo e specificarlo nell'array directives in ognuno di questi componenti (che è A LOT)?

Ho provato a iniettare alla funzione bootstrap come si suppone a che fare con i servizi di avere un'istanza a livello globale, ma che non ha funzionato

+0

Penso che se fornisci la tua direttiva globaly intendo al momento del componente root Bootstraping quindi non è necessario importare nell'array di ogni commponent –

+0

Se hai letto l'ultima frase nella mia domanda, avresti saputo che l'ho già provato – kamilkp

risposta

30

mia comprensione è che si deve optare per tutto personalizzato direttive a livello di componenti. Solo PLATFORM_DIRECTIVES sono implicitamente inclusi (ngFor, ngIf ecc.).

Tuttavia, è possibile registrare il proprio direttiva personalizzato come PLATFORM_DIRECTIVE

import { provide, PLATFORM_DIRECTIVES } from '@angular/core'; 

bootstrap(RootCmp, [ 
    provide(PLATFORM_DIRECTIVES, {useValue: YourCustomDirective, multi: true}), 
]); 

Ecco un articolo che parla di più sul processo: http://blog.thoughtram.io/angular2/2015/11/23/multi-providers-in-angular-2.html

EDIT: Considero questo meno di una preoccupazione ora poiché i componenti sono dichiarati a livello di modulo. Ciò significa molto meno ripetizioni poiché non è più necessario dichiarare componenti figlio a livello di singolo componente.

+1

Grazie. Questa è un'ottima risposta, non ne ero consapevole. Funziona come un fascino. – kamilkp

+1

Nota: Qualsiasi ' _PROVIDERS' come' HTTP_PROVIDERS' può essere passato direttamente alla lista mentre tutte le direttive devono essere passate usando 'provide (..)' come spiegato sopra perfettamente da TGH. Non è necessario che sia una direttiva personalizzata, ma anche direttive esterne basate su librerie npm, come le direttive della libreria material2 devono essere passate in questo modo nella funzione bootstrap. –

+1

Potrebbe voler aggiornare questa risposta poiché non è più relephant –

Problemi correlati