感觉Angular中有第三个范围（除了公共和私有），但没有

Question

到目前为止，我可以阅读文档，在TypeScript中只有public和private作为范围。 但是，当我尝试以下练习时，我会得到不同的结果，就好像变量environment对标记不可见，除非声明（公开或私下）。

<div class="text-section">
  Name is: {{environment.shazoo}}.
</div>

import { environment } from "../../../../environments/environment";
...
@Component({ ... })
export class DemoComponent implements OnInit {
  constructor(private builder: FormBuilder) { ... }
  ...
  private environment = environment;
}

上面的例子导致显示hazaa文本。 但是，如果我注释掉将导入的环境实例分配给本地声明的实例，则文本将消失。

import { environment } from "../../../../environments/environment";
...
@Component({ ... })
export class DemoComponent implements OnInit {
  constructor(private builder: FormBuilder) { ... }
  ...
  // private environment = environment;
}

我的方式是，如果导入的实例在代码中可见但在标记中不可见，则存在第三级范围，无论可能是什么（某种隐蔽的私有东西）。 但我几乎认为现实情况并非如此。 我错过了什么？

Answer 1

您似乎将TypeScript可见性与JavaScript上下文和变量作用域混淆。

private和public是访问修饰符 ，只影响编译阶段的类型检查，并且是可选的（除了它们用作构造函数的情况，它们也隐式地将参数指定为类属性）。

private environment = ...背后的含义private environment = ...是this.environment = ...发生在引擎盖下的构造函数中。 您可以签入转换后的代码

export class DemoComponent implements OnInit {
  ...
  environment = environment;
}

结果在this.environment = environment （ public访问修饰符在这里是可选的）。

在另一个地方（编译模板）中不可能使用导入的environment变量（它是导入它的组件模块的本地变量），除非它可用于应该使用的地方（模板编译器），例如通过分配它到它有权访问的东西（类属性）。 这是由JavaScript的工作方式建议的，并不是特定于Angular或TypeScript。

{{environment}}实际上意味着正在从组件类实例中读取environment属性。 由于模板语法是由Angular编译器定义的DSL， this可以在那里使用，但为简洁起见， this是可选的：

{{environment === this.environment}} is true

最后，模板中使用的所有组件属性都应该是公共的，即不应具有private或protected访问修饰符。 这是Angular AoT编译所必需的。