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

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

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
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 будет отображать компонент только в том случае, если условие истинно.

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