角2；打字稿 - 访问变量

Question

我正在导出一个具有 2 个变量和 2 个函数来更改这些变量（它们是布尔值）的组件。

现在，当我使用 (click) 触发我的函数时，我得到了错误：

原始异常：ReferenceError：未定义着陆

但如果我将着陆和投资组合定义为变量，即 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关键字：

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

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

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

这是因为 landing 和 portfolio 是类（属性）的一部分。方法也是一样。

在与组件关联的模板中，您不需要this 关键字，因为Angular2 在评估表达式时会自动查看组件类的属性和方法。只有与组件关联的元素才能在表达式中使用...

Answer 2

这应该做你想做的：

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