Как я могу использовать document.querySelector в TypeScript/Angular?

Я пытаюсь написать форму входа/регистрации, в которой пользователь может переключаться между двумя формами (одновременно отображается только одна). Я использую простую кнопку, чтобы воспринимать изменения. Я написал это в простом 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-файла и вставляю его в машинописный файл. Теперь я получаю новую ошибку «Объект, возможно, равен нулю».

Почему объект нулевой? Что я могу сделать, чтобы иметь доступ к кнопке и функции?

Я очень благодарен за любую помощь

Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
Учебник по Javascript
Учебник по Javascript
JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...
Анимация SVG-узоров без единой строки CSS
Анимация SVG-узоров без единой строки CSS
Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...
5 распространенных ошибок, которых следует избегать при начале работы с HTML
5 распространенных ошибок, которых следует избегать при начале работы с HTML
Приветствую вас, изучающие HTML! Я составил список распространенных ошибок, которые часто допускают студенты, начинающие изучать HTML. Пожалуйста,...
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
0
0
75
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте угловой способ!

Код позади:

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.

NgIf будет отображать компонент только в том случае, если условие истинно.

Другие вопросы по теме