Question

我有一个按钮点击时打开的模态。如果我重新加载页面，它会按预期工作，但如果我从主页面导航到NewMatch组件，则单击按钮不会执行任何操作。

export class NewMatchComponent implements OnInit {

  constructor() {
    $(document).ready(function() {
      //TODO fix bug where navigating from main to newmatch and then clicking the modal submit sometimes works and sometimes doesn't (depending on whether you've navigated away from the page before??)
      $('.modal').modal();
    });
  }

  ngOnInit() {
  }
...
}

以下是package.json中的包依赖项：

...
"dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "angular-froala-wysiwyg": "^2.7.2-1",
    "angular2-materialize": "^15.1.10",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "jquery": "^2.2.4",
    "materialize-css": "^0.100.2",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "jquery": "^2.2.4",
    "@types/youtube": "0.0.29",
    "core-js": "^2.4.1",
    "ngx-youtube-player": "0.0.41",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  }
...

以下是用作模态触发器的模态和按钮的html（改编自Materialize css modal page：

....
<div id="modal1" class="modal">
      <div class="modal-content">
        <h4>Annotate your submission?</h4>
        <p>You can either go ahead and annotate your own submission, or it will be added to the annotation queue, to be annotated at some later time.</p>
      </div>
      <div class="modal-footer">
        <button (click)="annotateCurrentVideo()" class="modal-action modal-close waves-effect waves-green btn">Annotate</button>
        <button (click)="addToQueueAndReturnToMain()" class="modal-action modal-close waves-effect waves-green btn">Add to Queue</button>
      </div>
    </div>

    <button class="btn modal-trigger waves-effect waves-light" data-target="modal1">Submit
      <i class="material-icons right">send</i>
    </button>
...

我有一个github repo，它有一个分支，可以在这里重现错误：

git clone https://github.com/Atticus29/dataJitsu.git
cd dataJitsu
git checkout modalSO
rm package-lock.json
npm install
ng serve

在主包中，单击“新建匹配”，然后单击“提交”按钮。什么都不应该发生。如果您重新加载该页面，“提交”按钮应该打开一个模式。

我正在使用Google Chrome版本62.0.3202.94（官方版本）（64位）。

在Angular2中刷新页面之前，Materialize模式不起作用

0 个答案: