Angular2; typescript - Zugriff auf Variablen

Question

Ich exportiere eine Komponente mit 2 Variablen und 2 Funktionen, um diese Variablen (die boolesch sind) zu ändern.

Nun, wenn ich mit meiner Funktion auslösen (click) erhalte ich die Fehlermeldung:

ORIGINAL EXCEPTION: ReferenceError: landing is not defined

aber Wenn ich Landung und Portfolio definieren als Variablen var landing = true; dh ich kann sie nicht beurteilen mit *ngIf

Diese meine Komponente ist der Export von:

export class NavigationComponent { 
    landing = false; 
    portfolio = true; 

    changeMiniNavLanding = function() { 
     landing = true; 
     portfolio = false; 
    } 

    changeMiniNavPortfolio = function() { 
     landing = false; 
     portfolio = true; 
    } 
} 

ich bin neu in Typoskript und Angular2 und haben keine Ahnung, was ich falsch mache. In Angular1 würde ich sie einfach mit $ scope erreichen.

Answer 1

Sie müssen die this Schlüsselwort verwenden:

export class NavigationComponent { 
    landing = false; 
    portfolio = true; 

    changeMiniNavLanding() { 
    this.landing = true; 
    this.portfolio = false; 
    } 

    changeMiniNavPortfoliofunction() { 
    this.landing = false; 
    this.portfolio = true; 
    } 
} 

Es ist, weil landing und portfolio Teil der Klasse (Objekte) sind. Das Gleiche gilt für Methoden.

Innerhalb der Vorlage, die der Komponente zugeordnet ist, benötigen Sie das Schlüsselwort this nicht, da Angular2 beim Auswerten von Ausdrücken automatisch die Eigenschaften und Methoden der Komponentenklasse untersucht. Nur Elemente, die der Komponente zugeordnet sind, können in Ausdrücken verwendet werden.

Answer 2

Dies sollte das tun, was Sie wollen:

export class NavigationComponent { 
    landing:boolean = false; // `:boolean` is not necessary but improves feedback from the IDE 
    portfolio::boolean = true; 

    changeMiniNavLanding() { 
     this.landing = true; 
     this.portfolio = false; 
    } 

    changeMiniNavPortfolio() { 
     this.landing = false; 
     this.portfolio = true; 
    } 
}