在使用之前引用Angular组件中的枚举

Question

我有以下组件：

@Component({
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  // Must reference the enum to be able to use types later
  enumModalContentType = EnumModalContentType;
  // Changes according to button clicks to point to the right component to show in modal
  modalContentType: EnumModalContentType;
}

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" (click)="modalContentType = enumModalContentType.EnumValue" data-toggle="modal" data-target="#myModal">
	Launch demo modal
</button>

<app-modal [contentType]="modalContentType"></app-modal>

哪种方法效果很好。我的问题是：为什么我们不得不引用EnumModalContentType以便以后能够在HTML中使用它？为什么我们不能直接将它用作类型？

Answer 1

这一切都归结为范围。如果您正在构建AOT，则无法在模板中使用private个变量。必须在与模板相同的范围内有一个本地公共变量。在构建时，所有内容都在逻辑上分开并作用域，如果没有局部变量，模板就没有任何内容可以绑定。