Angular2; typescript - 変数へのアクセス

Question

2つの変数を持つコンポーネントをエクスポートしています。これらの変数（ブール値）を変更する2つの関数をエクスポートしています。

今、私は（クリック）して、私の機能を起動するとき、私はエラーを取得：

ORIGINAL EXCEPTION: ReferenceError: landing is not defined

が、変数はvar landing = true;、すなわちとして私が上陸し、ポートフォリオを定義した場合、私は*ngIf

これでそれらを評価することはできません私のコンポーネントの輸出です：

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

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

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

私はtypescriptとAngular2の新しいです、私は間違って何をしているのか分かりません。 Angular1では$ scopeでアクセスしています。

Answer 1

あなたがthisキーワードを使用する必要があります。メソッドでも同じです。

Angular2は式を評価するときにコンポーネントクラスのプロパティとメソッドを自動的に調べるので、コンポーネントに関連付けられたテンプレート内ではthisキーワードは必要ありません。コンポーネントに関連付けられた要素のみが式で使用できます...

Answer 2

これは、あなたが欲しいものを行う必要があります。landingとportfolioクラス（プロパティ）の一部であるため

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

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

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

にです：

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; 
    } 
}