Angular 如何使用applicationRef启用变更检测

我试图理解手动角度变化检测。到目前为止，我所知道的是，通过禁用我所做的ngZone，可以停止自动更改检测。但我有以下几个疑问：

1.）禁用自动更改检测是否也会禁用诸如悬停之类的事件？禁用ngZone时，应用于悬停在元素上的样式不可见。它们只有在应用程序第一次加载时才可见，只要我单击任何按钮，鼠标悬停就会停止工作。这个问题发生在我的VS代码中，而不是stackblitz中

2.）要实现手动更改检测，有多种方法，其中之一是使用applicationRef。但如何做到这一点呢？我已将app.tick（）添加到我的按钮单击触发的方法中。这是正确的方法吗？这同样适用于stackblitz，但当我在本地运行相同的代码时就不行了：-(

以下是我提到的文章和我尝试过的所有内容：

app.component.ts

itemList: any[] = [];
  displayModal: boolean;
  modalTitle: string;

  constructor(private app: ApplicationRef) {
    for (let i = 1; i <= 8; i++) {
      this.itemList.push('item' + i);
    }
  }

  open(action: string) {
    this.app.tick()
    this.displayModal = true;
    this.modalTitle = action;
  }

  close() {
    this.displayModal = false;
  }

---

有人能告诉我为什么这被否决了吗？我错过了什么吗？

<div class="card">
  <div class="title">
    <p><b>TITLE</b></p>
    <div>
      <i class="fa fa-plus" (click)="open('Add')"></i>
      <i class="fa fa-pencil" (click)="open('Edit')"></i>
    </div>
  </div>
  <div class="content" style="padding: 15px;">
    <div *ngFor="let item of itemList">
      <div>
        <p>{{item}}
        <p>
      </div>
    </div>

    <div id="myModal" class="modal" *ngIf="displayModal">
      <div class="modal-title">
        <p><b>{{modalTitle}}</b></p>
        <span class="close" (click)="close()">&times;</span>
      </div>
      <div class="modal-content">
        <p>Hello! I am the modal and I am working absolutely fine!</p>
      </div>
    </div>

p {
  font-family: Lato;
}

.card {
  width: 100%;
  height: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  font-family: sans-serif;
}
.card > .content > div {
  color: white;
  padding: 10px;
  margin-bottom: 5px;
  background-color: palevioletred;
}
.card > .title {
  color: black;
  display: flex;
  justify-content: space-evenly;
  background-color: lightgray;
  margin: 0px;
}
.card > .title > p {
  margin-top: 20px;
  margin-left: 20px;
  padding: 10px;
  width: 80%;
  text-align: center;
}
.card > .title > div > i {
  padding: 10px 15px;
  font-size: 20px;
  font-weight: bold;
  border: 1px solid transparent;
}
.card > .title > div > i:hover,
.card > .title > div > i:focus {
  cursor: pointer;
  border: 1px solid rgb(96, 12, 175);
  background-color: gray;
  border-radius: 5px;
}
.modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
  display: block;
  color: grey;
  background-color: #fefefe;
  padding: 25px;
  border: none;
  outline: none;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  width: auto;
  height: auto;
}
.modal-title {
  padding: 10px;
  display: flex;
  margin: 0px;
  background-color: grey;
  border: 2px solid whitesmoke;
}
.modal-title > p {
  width: 100%;
  text-align: center;
  margin: 0px;
  padding: 0px;
}
.close {
  padding: 0px 10px;
  margin: 0px;
  color: #aaa;
  font-size: 20px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  background-color: lightgrey;
  border: 1px solid white;
  text-decoration: none;
  cursor: pointer;
}