Angular2: Unklare Verhalten der Eigenschaft Bindung

Question

Context

Hallo, diese Frage kommt aus der Antwort von meinem vorherigen Post:

Angular2 : Error trying to diff 'true' with ngDoCheck()

menuService.service.ts

export class MenuService { 
    collapse:boolean; 
    collapse$:Subject<boolean> = new Subject(); 

    toggleMenu() { 
    this.collapse = !this.collapse; 
    this.collapse$.next(this.collapse); 
    } 
} 

Die Idee zuerst war, einen Menüzusammenbruch mit einer Eigenschaft [Zusammenbruch] zu bilden. Nach den Ratschlägen aus der letzten Frage, die im Link verfügbar war, habe ich einen Dienst eingerichtet, der eine boolesche Eigenschaft für den Status des Menüs enthält, mit einem beobachtbaren/zu benachrichtigenden Objekt, wenn es aktualisiert wird.

collapse.animation.ts

export class Collapse { 
    @Input() duration: number = 200;    
    @Input() collapse: any;     
    private _animation: CssAnimationBuilder; 

    constructor(animationBuilder: AnimationBuilder, private _element: ElementRef, private service: MenuService) { 
     this._animation = animationBuilder.css(); 

     // Link to service 
     this.service.collapse$.subscribe((collapse) => { 
      this.updateMenu(collapse); 
     }); 
    } 

    updateMenu(collapse: boolean) { 

     console.log("-----------------------"); 
     console.log("service.collapse : " + collapse); 
     console.log("animation.collapse : " + this.collapse); 
     console.log("-----------------------"); 

     // collapse from service or this.collapse from input ? 
     if (collapse) { 
      this.hide(); 
     } else { 
      this.show(); 
     } 
    } 

    .... 
} 

Diese Klasse ist mein Zusammenbruch CSS-Animation mit den Methoden verbergen() und show(). Wenn die Eigenschaft "collapse" aktualisiert wird, wird das mit der Eigenschaft verknüpfte html-Element abhängig vom booleschen Wert reduziert.

header.component.html

<button type="button" class="header_menu nav_icon root_navitem" id="btn_menu_switch" (click)="toggleMenu()"> 
    <img class="header_menu" src="css/App_Themes/VAL/48x48/m_bars.png" alt="" /> 
</button> 

.... 

<div id="left_bar" tabindex="-1" class="left_bar collapse" [collapse] 
    (clickOutside)="handleClickOutside($event.target.className)"> 
</div> 

Dies ist die HTML-Vorlage in einer meiner Komponenten verwendet. Die Idee ist, dass eine Bildschaltfläche mit dem zu minimierenden div-Menü verknüpft ist: Mein Menü enthält die [collapse]-Eigenschaft, die mit der Collapse-Animation verknüpft ist. Das Ereignis der Schaltfläche click() ist mit dem Dienst verknüpft, der den Eigenschaftswert aktualisiert.

Frage

Mein Problem ist, dass ich auf meinem HTML-Elemente, und meine Service-Eigenschaft, die die Beziehung zwischen dem Zusammenbruch Eigenschaft nicht verstehen. Wie Sie in der Datei collapse.animation.ts sehen können, verfolge ich die Minimierungswerte, um zu sehen, was in diesem Codeabschnitt passiert.

Wenn ich die Anwendung ausführen, das Verhalten des Menüs ist genau wie beabsichtigt, aber wenn ich die Protokolle sehen, ich sehe, dass:

----------------------- 
service.collapse : false 
animation.collapse : undefined 
----------------------- 
----------------------- 
service.collapse : true 
animation.collapse : undefined 
----------------------- 
.... 

Und das ist, was ich nicht verstehe. Wenn this.collapse nicht definiert ist, dann brauche ich es nie, aber gleichzeitig muss ich den @Input auf meiner Animation behalten oder mein [collapse] auf meinem Html definierter wird nie erkannt.

Wie erwartet, wenn ich die @Input() löschen: alle; bekomme ich folgende Fehlermeldung:

// EXCEPTION: Template parse errors: 
// Can't bind to 'collapse' since it isn't a known native property 

Wie funktioniert Angular2 die Verbindung zwischen dem Zusammenbruch Unterkunft Service macht und dem Zusammenbruch Eigenschaft HTML-Element? Und warum ist animation.collapse nicht definiert?

Danke für irgendwelche Einblicke.

Answer 1

In der Tat gibt es keine Beziehung.Der Parameter collapse ist derjenige, der vom Beobachter beim Aufrufen seiner next-Methode bereitgestellt wird, und this.collapse ist eine Komponenteneigenschaft.

Wenn der Rückruf in der abonnieren Methode gesetzt genannt wird, this.collapse aktualisiert wird, wenn Sie es explizit tun:

updateMenu(collapse: boolean) { 
    this.collapse = collapse; 
    (...) 
}