可以将 @ViewChild 标记为私有吗?
Is it okay to mark a @ViewChild as private?
如果模板中未引用 ViewChild,是否可以将其标记为私有?
我已经能够做到这一点,然后使用“--prod”标志构建和服务,并且没有遇到任何错误。我目前正在使用 Angular 7.
@ViewChild(HelloComponent) private helloComponent;
这是我所说的堆栈闪电战:
https://stackblitz.com/edit/angular-vxbpuk?file=src%2Fapp%2Fapp.component.ts
我 认为 我有使用 aot 的 stackblitz,但你可以在本地验证同样的事情。
编辑:我很抱歉之前没有提出这个问题,但是 angular 文档中的这个简介让我停下来:
https://angular.io/guide/aot-compiler#phase-2-code-generation
Decorated component class members must be public. You cannot make an @Input() property private or internal.
但是正如@GCSDC 已经在下面指出的那样,Angular 团队似乎在他们的示例中使用了私有成员:
https://angular.io/guide/component-interaction#parent-calls-an-viewchild
似乎是的,这没关系,因为您可能会在官方 angular 基础指南中找到它,地址:
组件和模板 > 组件交互 > Parent calls an @ViewChild():
@ViewChild(CountdownTimerComponent)
private timerComponent: CountdownTimerComponent;
是的,这样做没问题。由于这个变量作用域被限制在component
class,我们可以声明它private
并使用。
@ViewChild
是用来在 component
中与 child component
交互的,所以我们可以保留它 private
.
private
和 public
语法是 javascript 语言的增强功能,用于 "static analyze" in typescript transpiler, I would recommend you to try the playground typescript 如何转译为 JS。所以基本上,任何阅读代码的人都可以通过这种方式了解 variables/functions 的范围。
class 中的一个简单变量的示例是它们都转译为相同的 JS private var1: number = 0
并且 public var1: number = 0
都转译为 this.var1 = 0
但是!在某些情况下,您实际上想从父组件访问@ViewChild,但在那种情况下,您必须将其设置为 @ViewChild(HelloComponent) public helloComponent;
,否则会出现 "compile/transpile" 错误。如果您想更清楚地了解范围的位置,请将其保留为 private
而不是像这样使用 getters/setters :
export class MyComponent {
@ViewChild(HelloComponent) private _helloComponent;
get helloComponent(): any {
return _helloComponent;
}
set helloComponent(set: any) {
this._helloComponent = set;
}
}
这是语法糖,你使用 typescript 只是确保有更少的错误并防止它们,但最终在编译代码之后所有的代码都被转译回 javascript。以及你如何使用上面的 private
关键字如果你只在当前 class 中使用这个变量它会很好但是如果你在构建项目和部署时在其他 class 中访问这个变量你会得到错误.
在 javascript 中没有私有或 public 一切都是闭包范围的。
如果模板中未引用 ViewChild,是否可以将其标记为私有?
我已经能够做到这一点,然后使用“--prod”标志构建和服务,并且没有遇到任何错误。我目前正在使用 Angular 7.
@ViewChild(HelloComponent) private helloComponent;
这是我所说的堆栈闪电战:
https://stackblitz.com/edit/angular-vxbpuk?file=src%2Fapp%2Fapp.component.ts
我 认为 我有使用 aot 的 stackblitz,但你可以在本地验证同样的事情。
编辑:我很抱歉之前没有提出这个问题,但是 angular 文档中的这个简介让我停下来:
https://angular.io/guide/aot-compiler#phase-2-code-generation
Decorated component class members must be public. You cannot make an @Input() property private or internal.
但是正如@GCSDC 已经在下面指出的那样,Angular 团队似乎在他们的示例中使用了私有成员:
https://angular.io/guide/component-interaction#parent-calls-an-viewchild
似乎是的,这没关系,因为您可能会在官方 angular 基础指南中找到它,地址:
组件和模板 > 组件交互 > Parent calls an @ViewChild():
@ViewChild(CountdownTimerComponent) private timerComponent: CountdownTimerComponent;
是的,这样做没问题。由于这个变量作用域被限制在component
class,我们可以声明它private
并使用。
@ViewChild
是用来在 component
中与 child component
交互的,所以我们可以保留它 private
.
private
和 public
语法是 javascript 语言的增强功能,用于 "static analyze" in typescript transpiler, I would recommend you to try the playground typescript 如何转译为 JS。所以基本上,任何阅读代码的人都可以通过这种方式了解 variables/functions 的范围。
class 中的一个简单变量的示例是它们都转译为相同的 JS private var1: number = 0
并且 public var1: number = 0
都转译为 this.var1 = 0
但是!在某些情况下,您实际上想从父组件访问@ViewChild,但在那种情况下,您必须将其设置为 @ViewChild(HelloComponent) public helloComponent;
,否则会出现 "compile/transpile" 错误。如果您想更清楚地了解范围的位置,请将其保留为 private
而不是像这样使用 getters/setters :
export class MyComponent {
@ViewChild(HelloComponent) private _helloComponent;
get helloComponent(): any {
return _helloComponent;
}
set helloComponent(set: any) {
this._helloComponent = set;
}
}
这是语法糖,你使用 typescript 只是确保有更少的错误并防止它们,但最终在编译代码之后所有的代码都被转译回 javascript。以及你如何使用上面的 private
关键字如果你只在当前 class 中使用这个变量它会很好但是如果你在构建项目和部署时在其他 class 中访问这个变量你会得到错误.
在 javascript 中没有私有或 public 一切都是闭包范围的。