Question

我从Angular 6跳到Angular JS已经有一段时间了，我正在尝试在Component Architecture中进行编码。问题是-我正尝试使用ng-show="somevariable"隐藏/显示div。

AppRootModule：

export const appRootModule: IModule = module('datawalk', ['asyncFilter'])
  .component('appRoot', new AppRootComponent())
  .component('postModal', new PostModalComponent())
  .service('componentsDataService', ComponentDataService);

PostModalComponent：

export class PostModalComponent {
  public template: string;
  public controller: Injectable<IControllerConstructor>;
  public controllerAs: string;

  constructor() {
    this.controller = PostModalController;
    this.controllerAs = 'postM';
    this.template = PostModalTemplateHtml;
  }

PostModalController

export class PostModalController implements IController {
  public modalVisible: boolean;
 /../

  constructor(componentsDataService: ComponentDataService) {
    /../
    this.modalVisible = false;
    /../
    this.$cds.getModalData().subscribe((data: any) => {
      if (data.showMod === true) {
        this.modalOpen(data);
      }
    });
  }

  public $onInit = async (): Promise<void> => {};

  public modalOpen(post: any): void {
    console.error(this.modalVisible); // false
    this.modalVisible = true;
    console.error(this.modalVisible); // true
    /../ 
  }

和模板：

<div class="modal" ng-show="modalVisible">
    <div class="modal-body">
        /../
    </div>
</div>

任何人都可以告诉我我做错了什么吗？控制台日志显示变量已更改，但未发生任何变化，模态div仍处于隐藏状态。

Answer 1

好。所以我想通了。

这不是代码问题，但是问题出在我的IDE内部。

WebStorm有一个问题-它无法识别组件体系结构中AngularJS的HTML模板中的controllerAs属性。

tslint也无法正常工作。

我不建议将其用于具有组件体系结构的AngularJS。

Vs Code可以完美地解决此问题。

AngularJS，TypeScript，组件体系结构怪异行为

1 个答案: