Ich habe zwei Angular-Projekte mit diesen Versionen:
- 9.0.0-next.6
- 8.1.0
In der Version 9 habe ich dies verwendet, um das window
Objekt bereitzustellen und zu injizieren :
@NgModule({
providers: [
{
provide: Window,
useValue: window
},
]
})
export class TestComponent implements OnInit {
constructor(@Inject(Window) private window: Window)
}
Welches funktioniert gut.
Wenn Sie diesen Ansatz für Version 8 verwenden, werden beim Kompilieren Warnungen und Fehler ausgegeben:
Warnung: Es können nicht alle Parameter für TestComponent aufgelöst werden.
Ich habe es mit einfachen Anführungszeichen wie folgt gelöst:
@NgModule({
providers: [
{
provide: 'Window',
useValue: window
},
]
})
export class TestComponent implements OnInit {
constructor(@Inject('Window') private window: Window)
}
Was ist der Unterschied zwischen beiden Versionen?
Was ist der Unterschied in Winkel 8 und 9, der dieses Ding verursacht?
javascript
angular
typescript
dependency-injection
angular8
Lampenschirm
quelle
quelle
Antworten:
Damit Ihre App mit Server Side Rendering funktioniert, empfehlen wir Ihnen, nicht nur Windows Through Token zu verwenden, sondern dieses Token auch SSR-freundlich zu erstellen, ohne darauf zu verweisen
window
. Angular verfügt über ein integriertesDOCUMENT
Token für den Zugriffdocument
. Folgendes habe ich für meine Projekte entwickelt, diewindow
über Token verwendet werden können:quelle
Betrachtet man die
ValueProvider
Schnittstelle:Die
provide
Eigenschaft ist vom Typany
. Das bedeutet, dass jedes Objekt (einschließlich desWindow
Konstruktors) darin enthalten sein kann. Das Objekt spielt eigentlich keine Rolle, nur die Referenz spielt eine Rolle, um zu identifizieren, welcher Anbieter zum Einfügen eines Parameters in einen Konstruktor verwendet werden soll.Es sollte nicht als bewährte Methode angesehen werden, den nativen
Window
Konstruktor als Injektionstoken zu verwenden. Es schlägt zur Kompilierungszeit fehl, daWindow
es zur Laufzeit in einer Browserumgebung vorhanden ist. Es ist auch als TypeScript vorhanden.declare
Der Angular 8-Compiler kann jedoch keine statische Code-Analyse durchführen, um die ParameterWindow
in den Anbietern undWindow
in einem Konstruktor zu korrelieren , da die Zuweisung vonWindow
erfolgt vom Browser, nicht vom Code. Ich bin mir nicht sicher, warum es in Angular 9 funktioniert ...Sie sollten Ihr eigenes Injection-Token erstellen, das den Abhängigkeitsanbieter darstellt. Dieser Injektionstoken sollte entweder:
'Window'
)InjectionToken
. Zum Beispielexport const window = new InjectionToken<Window>('window');
Darüber hinaus sollte der Winkel Code plattformunabhängig sein (sollte auch in einem Browser und auf einem Node.js Server ausführbar sein) , so wäre es besser, eine Fabrik zu verwenden , dass die Rendite
window
oderundefined
/null
, dann behandeln Sie dasundefined
/null
Fall in den Komponenten.quelle