Question

当用户单击电子邮件中的电子邮件验证链接时，会将他带到mywebsite.com/?token=tokenstringexample 如果令牌正确，则this.token = true;设置为true，如果其为true，则应显示模型。我在模板和控制台中打印了token的值，没有问题，它会更新打印正确的值，但是当用户单击电子邮件中的链接时，该模型不会显示，但是如果我在.ts文件或在html中设置token == undefined的值，然后刷新页面，然后模型显示。我想知道这是否是由于响应时间所致，页面正在加载，但是响应稍后出现，因此将其设置为true。

<div *ngIf="token==true">
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Congrats!<br> Your Account is now active</h4>
        </div>
        <div class="modal-body">
          <p>You may now login</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  </div>

打字稿

declare var $: any;

export class HomeComponent implements OnInit {
token: boolean;

  ngOnInit() {
this.chk.activateUser(token).subscribe( (res) => {
      if(res) {
        this.token = true;
        console.log(this.token);
        ............
        ............
        }

        $(document).ready(function(){
        $('#myModal').modal('show');
        }
    }

Answer 1

您可以直接使用$('#myModal').modal('show');来显示模态，而无需使用$(document).ready函数。删除*ngIf属性，因为changeDetection仅在所有行都执行后才会发生

ready()方法用于使函数在文档已加载

Answer 2

为什么要同时使用ngIf和JQuery隐藏/显示方法？将JQuery与较新的angular一起使用是不好的做法。尝试仅将* ngIf与令牌成员一起使用。

仅当我手动刷新页面时，模型才会打开

2 个答案: