如何使用文档.TypeScript/ Angular中的querySelector ?

Question

我正在尝试编写一个登录/注册表单，用户可以在两个表单之间切换(一次只显示一个)。我使用一个简单的按钮来感知变化。我把它写在一个简单的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文件中。现在我得到一个新的错误">对象可能是'null'。">

为什么对象是空的?我怎么做才能访问按钮和功能?

我非常感谢你的帮助

Answer 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>

下面是一个简单的Stackblitz示例。

只有当条件为true时，ngIf才会渲染该组件。