Angular2 Baukastensystem Bruch der Modularität

Question

ich Ihnen den folgenden Code:

https://plnkr.co/edit/xxNW1xAIPoGtTK84OxGq

Hinweis: Dies gilt nicht wegen SystemJS arbeiten, die ich einfach nicht konfigurieren. Wer will, kann bearbeiten, wenn es frei ist, damit es funktioniert. Ich habe die Angular-Cli und Standard-Webpack-Konfiguration verwendet und das funktioniert.

Meine Frage ist über den "AlertService", der benötigt wird, um eine "Warnung" anzuzeigen. Es wurde im Kernmodul extrahiert. Aber wenn ich es benutzen muss, habe ich es so importiert import { AlertService } from '../core/alert/alert.service' wie in dashboard.component.ts vorhanden, um es zu injizieren.

Stört das nicht den modularen Ansatz, da ich ihm den Weg zur Klasse geben muss? Wenn ich den Speicherort des AlertService innerhalb des CoreModules ändere, muss ich immer noch die Zeichenfolge in der DashboardComponent ändern. Auch in diesem Beispiel, wenn AlertService nicht vorhanden ist, wird DashboardComponent nicht ausgelöst ... aber DashboardComponent ist Teil des DashboardModules, das in der Lage sein sollte, eigenständig zu starten - sonst was ist der Sinn der Module, wenn sie statisch gekoppelt sind, könnte ich einfach setzen alles an einem Ort.

Ich möchte eine allgemeine Alert-Komponente erstellen, die ich nur einmal in die gesamte App aufnehmen und überall verwenden kann.

Aber ich denke, ich verstehe das Konzept der Module und/oder wie man sie verwendet. Ich habe den Abschnitt "Module" in Angular.io mehrmals gelesen und mehrere Tutorials durchlaufen.

Mit freundlichen Grüßen

Answer 1

Wenn viele Dateipfade stört Sie viel, ist eine mögliche Lösung wechseln zu müssen ist eine weitere Ebene hinzufügen - erstellen services.ts Datei, haben dann die kanonische Importe dort und nicht in jeder Komponente. Auf diese Weise haben Sie nur eine Datei zu aktualisieren, wenn Sie den Pfad ändern:

services.ts:

import { AlertService } from './alert.service'; 

// ES2015 shorthand property initializer 
export default { 
    AlertService 
}; 

yourComponent.ts:

import { AlertService } from "../services"; 
... 

Wenn Sie eine Komponente wollen auch arbeiten Wenn ein Dienst nicht vorhanden ist, können Sie make it an optional dependency (null zurückgeben, wenn es nicht existiert), aber TypeScript zwingt Sie, den Dienst noch in die Datei zu importieren, um Codevervollständigung/typings zu erhalten. Das hat mich immer ein bisschen verrückt gefühlt.