0

Aufbau der App:Angular2 modaler Dialog

AppService AppComponent -> HeroComponent -> WeaponComponent -> ButtonComponent

Wenn jemand auf der Schaltfläche (ButtonComponent) klickt, würde Ich mag einen modalen Dialog öffnen, in die App-Komponente.

Der beste Weg, den ich mir vorstellen kann, ist einen DialogObservable im AppService machen. Die ButtonComponent setzt das Observable und die AppComponent überwacht es und zeigt das Dialogfeld an, wenn ein Dialog gesetzt ist.

Das fühlt sich schon ein bisschen chaotisch an.

Aber um es noch schlimmer zu machen, brauche ich auch Schaltflächen im Dialog. Wenn jemand auf den "OK" -Button klickt, möchte ich eine Aktion von der WeaponComponent aufrufen. Was, soweit ich weiß, unmöglich ist. Also was mache ich? Erzeuge eine weitere beobachtbare Komponente im Dienst und höre sie in der Waffenkomponente an.

Das fühlt sich sehr unordentlich an, und ich denke, dass es einen besseren Weg geben muss. Ich kann es einfach nicht herausfinden.

Antwort

1

Ich hatte ein ähnliches Problem und ich löste es, indem ich ein Modal in meinem Wurzelmodulbauteil hinzufügte und eine ModalService über meine Anwendung zur Verfügung stellte.

ModalService wird als Ereignisverteiler verwendet, um das modale Ereignis zu senden.

Exemple mit nur Signaturen (zu leicht verständlich sein, die Umsetzung ist nicht so schwer):

@Injectable() 
export class ModalService{ 
    public registerModal(name:string, onPop:()=>void):void; 
    public popModal(name:string):void; 
} 

Auf diese Weise Ihre ModalComponent kann überall sein (und Sie eine Menge Modalverben mit verschiedenen Namen haben können) und Sie können es von überall her knallen, da Sie nur die ModalService bekommen müssen.

Beachten Sie, dass Sie nur eine Instanz von ModalService verwenden müssen, damit dies funktioniert, so dass es in Ihrer module.forRoot()-Methode deklariert werden muss.

EDIT:

das Kontext Problem zu beheben, können Sie Ihre Funktion deklarieren und speichern sie in einer Variablen, auf diese Weise:

function foo():any{ 
} 

wird

foo=():any => { 
} 

dann können Sie passieren die Callback-Methode zu Ihrem Modal mit this.foo, wird es den Kontext nicht verlieren.

+0

Wenn ich Sie richtig verstehe, mache ich es in ähnlicher Weise. Ich erstelle das Modal im Service. Aber mein größtes Problem ist, wie man die Knopfklicks im Dialog behandelt. Ich möchte, dass die Klickereignisse der Schaltflächen im Dialog Handler in der Komponente auslösen, die den Dialog geöffnet hat, nicht im Dialog selbst oder im Service. Ich kann beim Öffnen des Dialogs eine Funktion übergeben, die funktioniert. Aber es wird aus dem Rahmen gerissen. Aus dieser Event-Handler-Funktion heraus kann ich also nicht mehr auf die ursprüngliche Komponente zugreifen. Also bin ich immer noch dabei. – Kris

+0

Ihr Modal sollte in Ihrer Modul-Basis-Komponente sein, so dass es immer noch in seinem Modul-Bereich ist, aber Sie platzieren es mit CSS, um Vollbild + Top-Z-Index zu sein, und es ist fertig. – Supamiu

+0

In meiner Situation ist das leider nicht möglich.Ein Dialog ist nur ein Beispiel, könnte aber auch eine andere Warnmeldung irgendwo in der App sein, aber außerhalb der Komponente. Für jetzt reparierte ich es, indem ich "dieses" zum modalen übertrug, das den Trick tut, obwohl es ein wenig unordentlich ist ... – Kris

Verwandte Themen