设置为 true 时不显示角度组件

Question

简而言之，我有一个网站，当您执行某个操作（例如单击按钮）时，您会得到特定的结果（打开或关闭）。当结果打开时，组件模式应该显示，但我没有看到它（它应该看起来像页面上的新窗口，但不是真正的窗口）。如果我检查 DOM，我会看到它的大小为 0x0，这是没有意义的。从逻辑上讲，一切似乎都正常，我不明白为什么我无法显示它。任何见解表示赞赏。

模态 html 看起来像这样（结果只是在单击时推送到，因此尝试可以是 5 行，我可以在控制台中通过日志记录确认它正在推送并按预期工作）：

<div class="modal">
    <h2>Results</h2>
    <ng-container *ngFor="let result of results; let i = index">
        <p>
            Attempt {{ i + 1 }}
        </p>
    </ng-container>
</div>

造型如下：

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

在主页组件上，我有一个如下所示的 div。当结果为“on”时，showModal 变量设置为 true：

 <div *ngIf="result === 'on'>
    <div *ngIf="showModal" class="modal-overlay">
      <app-results-modal [results]="results"></app-results-modal>
    </div>
  </div>

家居风格如下：

.on-container {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.on {
  font-size: 28px;
  font-weight: bold;
  font-family: "Helvetica", sans-serif;
  color: white;
}

.input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.on-info {
  margin-bottom: 20px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  font-family: "Helvetica", sans-serif;
  color: white;
}

整个提货页 html 以及上面的模态代码：

<ng-container>
  <div *ngIf="quote">
    <h1>Click a button</h1>
    <blockquote>
      "Can you click it"
    </blockquote>
    <button (click)="pushClickOn()">Click</button>
    <button (click)="pushClickOff()">ClickOff</button>

    <div *ngIf="result !== ''">
      <p>{{ resultMessage }}</p>
      <div *ngIf="result !== 'on'">
        <h3>Hints:</h3>
        <ul *ngIf="hints.length > 0">
          <li *ngFor="let hint of hints">{{ hint }}</li>
        </ul>
      </div>
      <div *ngIf="result === 'off'">
        <p>Currently off</p>
      </div>
    </div>
  </div>
  <div *ngIf="result === 'on'">
    <div *ngIf="showModal" class="modal-overlay">
      <app-results-modal [results]="results"></app-results-modal>
    </div>
  </div>
</ng-container>

我做了一些记录来查看当前的点击结果是什么。 当我单击“关闭”时，结果关闭。 showModal 是假的。 当我单击“打开”时，结果已打开并且 showModal 为 true，此时我希望看到结果模式显示，但事实并非如此。

Answer 1

所以我的问题是我在根 styles.scss 文件中导入引导样式，这使得所有样式都被劫持。删除它并按预期工作。