如何在 TypeScript/Angular 中使用 document.querySelector？答案

【问题标题】：How can I use document.querySelector in TypeScript/ Angular?如何在 TypeScript/Angular 中使用 document.querySelector？
【发布时间】：2022-11-20 19:10:48
【问题描述】：

我正在尝试编写一个登录/注册表单，用户可以在其中在两种形式之间切换（一次只显示一个）。我使用一个简单的按钮来感知变化。我把它写在一个简单的 html 文件中，它可以工作。现在我已经复制到我的 Angular 项目并且没有任何反应。

首先我尝试了这个（它在 html 文件中）：

<script>
  function showlogin() {
    document.querySelector('#login').classList.remove("d-none");
    document.querySelector('#register').classList.add("d-none");
  }


  function showregister() {
    document.querySelector('#login').classList.add("d-none");
    document.querySelector('#register').classList.remove("d-none");
  }


</script>

但后来我得到一个错误说“属性‘showregister’不存在”. 所以我从 html 文件中删除代码并将其粘贴到 typescript 文件中。现在我收到一个新错误“对象可能为“空”。“

为什么对象为空？我该怎么做才能访问按钮和功能？

我非常感谢任何帮助

【问题讨论】：

标签： html angular typescript bootstrap-5

【解决方案1】：

使用 Angular 方式！

代码隐藏：

loginVisible: boolean = true;
...
function showLogin() {
    loginVisible = true;
}

function showRegister() {
    loginVisible = false;
}

和 html 部分：

<div *ngIf="loginVisible">Login Data</div>

<div *ngIf="!loginVisible">Register Data</div>

Here 是一个简单的 Stackblitz 示例。

ngIf 只会在条件为真时渲染组件。

【讨论】：