как я могу включить код javascript в angular 2+?

Question

Я включаю этот тег скрипта на свою HTML страницу, но, похоже, он не работает. может кто-нибудь помочь? Мне это нужно для моего проекта. Мне нужен липкий заголовок. вот весь код для справки:

<div class="row" id="myHeader"><div class="column heading"><span>KC</span>Electronics</div>
<div class="column container h-100">
    <div class="d-flex justify-content-center h-100">
      <div class="searchbar">
        <input class="search_input" type="text" name="" placeholder="Search...">
        <a href="#" class="search_icon"><i class="fas fa-search"></i></a>
      </div>
    </div>
</div>
<div class="column contact" style="text-align: right;">
    <b>Call Us:</b><span> 9876543210</span><br>
    <b>Email:</b><span> kcelectronics@gmail.com</span>
</div>
</div>
<script>
    // When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
    window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
    </script>

Answer 1

Вы должны использовать HostListener в коде компонента ts как

import { HostListener} from "@angular/core";

@HostListener("window:scroll", [])
onWindowScroll() {
   this.scrollFunction();
}

scrollFunction() {
      if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
        document.getElementById("navbar").style.padding = "30px 10px";
        document.getElementById("logo").style.fontSize = "25px";
      } else {
        document.getElementById("navbar").style.padding = "80px 10px";
        document.getElementById("logo").style.fontSize = "35px";
      }
}

Обновлено:

В новом коде вы должны перемещать переменную внутри функции как и вызывать HostListener.

В angular, вы не должны обрабатывать скрипт в html файле, переместите их в файл ts компонента.

myFunction() {
  var header = document.getElementById("myHeader");
  var sticky = header.offsetTop;
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

Answer 2

Вы можете добавить директиву @HostListener в свой root компонент (в основном это app.component.ts) для обработки window scroll события

import {Component, HostListener, OnInit} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
  }

  @HostListener('window:scroll')
  scrollFunction() {
    if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
      document.getElementById('navbar').style.padding = '30px 10px';
      document.getElementById('logo').style.fontSize = '25px';
    } else {
      document.getElementById('navbar').style.padding = '80px 10px';
      document.getElementById('logo').style.fontSize = '35px';
    }
  }
}