0
153
VistasLlame a un método mecanografiado desde html escrito dentro del componente mecanografiado
Tengo una ventana emergente con 2 botones, Actualizar y Eliminar. Cuando se presiona el botón Actualizar, quiero que desaparezca la ventana emergente inicial y que aparezca una nueva ventana emergente con los mismos campos pero editable con otros 2 botones en la parte inferior, Confirmar y Eliminar.
Quiero configurar el código para la ventana emergente Actualizar en un método separado y llamarlo desde el botón HTML cuando se presiona el botón Actualizar
¿Cómo llamo al método deseado (myFunction) desde el HTML escrito dentro del componente TypeScript en el componente del botón?
private initMap(): void { this.map = L.map('map', { center: this.centroid, zoom: 2.8 }); this.tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { minZoom: 2.8, attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' }); this.tiles.addTo(this.map); this.powerPlantService.getAll().subscribe((data: any)=>{ console.log(data); this.geoJsonFeature = data; L.geoJSON(data, {onEachFeature: myOnEachFeatureMethod}).addTo(this.map) }) function myOnEachFeatureMethod(feature:any, layer:L.GeoJSON) { layer.bindPopup( "Power Plant Id: " + feature.properties.xxx + "<br>Power Plant Name: " + feature.properties.xxxx + '<div style="text-align:center"> '+ //below in the button i want to call the myFunction method. How do I do that? '<br><button type="button" class="btn btn-primary" style="margin-right: 5px" data = "' + feature.properties.xxx + '" ' + '>Update</button>' + '<button type="button" class="btn btn-danger" style="margin-left: 5px" data = "' + feature.properties.xxxx + '" ' + '>Delete</button>' + '</div>' ); } } myFunction(layer: any) { console.log("Yeet"); layer.bindPopup("Yeet"); }Esta es la ventana emergente que se muestra cuando se hace clic en el pin del mapa
1 Respuestas
Responde la pregunta0
Para pasar mensajes al componente desde el evento de clic de botón, usaremos el archivo javascript normal y lo incluiremos en angular.json .
También necesitamos rxjs declarados en el objeto de ventana. Sin embargo, rxjs, que está instalado en Angular a través de npm, no lo está, por lo que incluimos un archivo de secuencia de comandos cdn en el encabezado del archivo index.html .
src/index.html
<!DOCTYPE html> <html lang="en"> <head> .... <script type="text/javascript" src="https://unpkg.com/rxjs@%5E7/dist/bundles/rxjs.umd.min.js"></script> </head> <body> <app-root></app-root> </body> </html> Cree un archivo custom.js dentro de la carpeta /src/assets/js y cree un nuevo sujeto RxJS y también declare la función que desea llamar. Dentro de esa función, simplemente llame next sujeto para emitir un nuevo evento/mensaje.
src/assets/js/personalizado.js
var my_custom_subject = new rxjs.Subject() function myFunction() { my_custom_subject.next('hello from custom') } Para procesar este script dentro de su aplicación, puede incluirlo también en la etiqueta principal o incluirlo dentro de la matriz de scripts en el archivo angular.json . Es la etiqueta principal o está en el archivo de configuración; de lo contrario, intentará declarar my_custom_subject dos veces.
angular.json
{ ... "projects": { YOUR_PROJECT_NAME: { "architect": { "build": { "options": { "scripts": [ "src/assets/js/custom.js" ] } } } } } } Dentro de su componente, declare una const con el mismo nombre que el sujeto que creó en el archivo custom.js . Dentro de ngOnInit suscríbase al Observable para escuchar los eventos.
import { Component, OnDestroy, OnInit } from '@angular/core'; import { Subject } from 'rxjs'; declare const my_custom_subject: Subject<any> @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'], }) export class HomeComponent implements OnInit, OnDestroy { private subcription: Subscription; ... ngOnInit(): void { this.subcription = my_custom_subject.subscribe(data => console.log('subscription', data)) } ngOnDestroy(): void { this.subcription.unsubscribe(); } ... } Esto le permitirá llamar a myFunction declarado con javascript regular que pasará un mensaje a su componente. Al suscribirse, en realidad está escuchando los eventos de clic.