<script> var slider = document.getElementById('slider'); var active = document.getElementById('active'); var line1 = document.getElementById('line1'); var line2 = document.getElementById('line2'); line1.onclick = function() { slider.style.transform = 'translateX(0)'; } line2.onclick = function() { slider.style.transform = 'translateX(-50%)'; } </script>Estoy usando angular, y tengo este script aquí dentro de un archivo que he llamado home.component.html. Se supone que este script debe cambiar este texto que tengo de izquierda a derecha. Sin embargo, el script no funciona y supongo que home.component.css no está siendo influenciado. Llegué a esta conclusión copiando y pegando todo el código que tengo en el archivo html y css de mi componente doméstico en index.html y style.css. Sin embargo, por alguna razón, el guión funciona y el texto se mueve de izquierda a derecha. ¿Cuál es el problema exacto aquí y por qué no funciona dentro de un componente angular?
Si desea incluir secuencias de comandos a través de la etiqueta <script> en un proyecto angular, deberá agregar las secuencias de comandos en la parte <head> de index.html . Pero eso es una mala práctica. Una mejor manera sería importar scripts a través angular.json . Pero incluso entonces su script no funcionaría como está. Porque el componente se compila después de ejecutar los scripts. Por lo tanto, su secuencia de comandos no obtendrá ElementById porque no hay elementos para obtener en el momento en que se ejecutarán las secuencias de comandos.
He aquí un ejemplo alternativo:
<div #line1 style="width: 100px; height: 10px; background-color: red" (click)="onTranslatePos(line1)"></div> onTranslatePos(item: HTMLElement) { item.style.transform = 'translateX(-50%)'; }Ejemplo de trabajo: https://stackblitz.com/edit/angular-ivy-4rzqkw?file=src%2Fapp%2Fapp.component.html
¿Por qué no usar Angular?
<div class="slider" [style.transform]="'translateX('+value+')'"> .. </div> <button class="line1" (click)="value='0'">click</button> <button class="line2" (click)="value='-50%'">click</button> //in .ts you declare value:string='0'Recuerda: Angular es MVW: tienes variables en tu .ts que pueden cambiar, usas estas variables para cambiar las propiedades de los elementos de .html y usas eventos para cambiar las variables