Schließen Sie Modal auf Klick außerhalb, aber [versteckt] ist an @Input gebunden, weiß nicht, wenn bereit

Question

Ich habe eine Komponente für viewDetails. Seine Eingabe ist ein Name. Ich zeige die Details modal wenn Name! = Null. Beim Schließen setze ich den Namen = null. Ziemlich geradlinig ... außer dass ich Probleme habe, es zu schließen, wenn ich außerhalb des Modals klicke.

Ich habe die Richtlinie eingerichtet und es funktioniert großartig; Wie kann ich jedoch sagen, wann es "aktiv" zuhören soll oder nicht?

Im Moment benutze ich nur Name als echten Namen oder als null, um die Funktionen zum Anzeigen/Verbergen zu verwalten.

Geordnete Komponente:

<button (click)="detailName = item.name">Details</button> 
<my-detail [(name)]="detailName"></my-detail> 

Detailansicht:

<div [hidden]="!name"> // full screen with gray background 
    <div (clickOutside)="close()"> // inner modal contents 

Details Regler

@Input() name: string; 
    @Output() nameChange: EventEmitter<string>; 

    close() { 
    this.name = null; 
    this.nameChange.emit(null); 
    } 

Die (clickOutside) Richtlinie wie vorgesehen funktioniert, wenn Sie die Außenseite des modalen klicken close-Funktion wird aufgerufen. Das Problem ist jedoch, dass beim Klicken auf die Schaltfläche die Elemente generiert werden, das ClickOutside-Ereignis jedoch ausgelöst wird, da es außerhalb des Modalbereichs liegt. Ich kann auch keine Art von clickOutsideIsActive boolean basierend auf name! = Null verwenden, da zu diesem Zeitpunkt der Name gerade gesetzt wurde.

Ich verstehe, warum es nicht funktioniert, aber ich möchte wissen, wie ich das gewünschte Verhalten ändern kann. Ich weiß, ich kann alles in Emitter auf OnCreate Sachen wickeln, aber ich mag wirklich, wie sauber und einfach das eingerichtet wird. Ich bedanke mich für ihre Rückmeldung.

Update in Ordnung sieht aus wie ich es habe, oder zumindest einen Weg zu einer Lösung haben. Verwenden Sie lifecycle hook OnChanges, achten Sie darauf, dass es sich ändert, und werfen Sie den isActive in einem Timeout oder ähnlichem ab. ... Okay, gelöst, antworte unten.

Answer 1

Mithilfe von angle2 lifecycle hook onChanges können Sie ein isActive-Flag beibehalten und dieses an die closeOnClick-Direktive übergeben. Beispiel ...

<div [hidden]="!name"> 
    <div (clickOutside)="close()" [clickOutsideActive]="isActive"> 

    ngOnChanges(changes: SimpleChanges) { 

    let change = changes['name']; 
    if(!change) return; // if no property name, don't do anything 

    // if setting name to null (close), deactivate click watching 
    else if(typeof change.previousValue === 'string' && !change.currentValue) { 
     this.isActive = false; 
    } 
    // if setting name to string from null (open), activate click watching 
    else if(typeof change.currentValue === 'string' && !change.previousValue) { 
     // timeout used to let modal open before it tries to close itself 
     setTimeout(() => { 
     this.isActive = true; 
     }); 
    } 
    }