个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
问题 - 在解析和加载谷歌地图 API 脚本后，谷歌地图自动完成下拉菜单无法在我的网站主页上运行。我在我的网站主页上遇到了我认为是竞争条件的情况，在顶部导航栏内的输入字段中，我在 custom autocomplete directive 中使用谷歌地图自动完成功能。 .自动完成下拉菜单不起作用的问题仅发生在移动设备上，台式机似乎没问题。我正在使用 '<script async defer...' 来防止等待脚本完成 DL'ing 来 prase 页面，所以我相信输入标签上的指令(包含自动完成的地方)被解析和呈现并被在脚本有时间完成加载之前实例化。结果，下拉列表在主页(仅限移动设备)上不起作用，其他页面都很好。
解决方案 1 - 删除“async defer”并同步加载，这解决了问题并且加载速度似乎非常快，但不是我理想的解决方案，尤其是对于我的网站主页。也许有人可以在解析页面之前在这里谈谈他们对同步加载 map API 的想法？
解决方案 2 - 异步加载 Google API 脚本并等待它完成，然后在指令中实例化地点自动完成对象和监听器。我想使用内置的回调功能，但不确定这是否有效，但这似乎是我应该尝试的途径...
这是我的尝试，但我需要帮助，因为我有错误。
Index.html - 伪代码
<html lang="en">
<head>
// other tags left out for brevity
<script src="./index.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=secret-key&libraries=places&callback=initMap" async defer></script>
</head>
<body>
<app-root></app-root>
</body>
</html>Mainpage.html - 为简洁而创建的伪代码
<nav class="navbar navbar-light bg-light fixed-top">
<form class="form-inline">
<input appGooglePlaces class="form-control google-place-input" placeholder="Search" aria-label="Search" (onSelect)="fetchResults($event)">
</form>
</nav>Index.ts - 我创建此文件是为了从脚本接收回调“initMap”，但未被调用并收到错误提示。
localhost/:1 Uncaught (in promise) fe {message: 'initMap is not a function', name: 'InvalidValueError', stack: 'Error\n at new fe (https://maps.googleapis.com/m…GUFa3DM&libraries=places&callback=initMap:197:125'}
function initMap(): void {
// not being hit
console.log('callback hit');
// instantiate the objects inside the 'appGooglePlaces' directive so we can use it
}
export {
initMap
};仅供引用 - 我可以将回调函数嵌入到 index.html 文件中的脚本标记内，但是我无法调用其他 Angular 组件、服务、指令等。这可能吗在 Angular 中？
appGooglePlaces - 指令
import {
Directive,
ElementRef,
OnInit,
Output,
EventEmitter,
Input
} from '@angular/core';
import {
Address
} from '../shared/models/address';
@Directive({
selector: '[appGooglePlaces]'
})
export class GooglePlacesDirective implements OnInit {
private element: HTMLInputElement;
private autocomplete: google.maps.places.Autocomplete;
@Output() onSelect: EventEmitter < any > = new EventEmitter();
@Input() countrySelected = '';
constructor(private elRef: ElementRef) {
this.element = elRef.nativeElement;
}
ngOnInit() {
this.autocomplete = new google.maps.places.Autocomplete(this.element);
google.maps.event.addListener(this.autocomplete, 'place_changed', () => {
const place = this.autocomplete.getPlace();
if (place.name === '') {
return false;
}
const address = new Address();
// address processing left out for brevity
this.onSelect.emit(address);
});
}
}最佳答案
我想我有一些可能对您有用的东西，就像问题中的“解决方案 2”...
Here is a working example它的工作前提是 index.html 中有一个全局回调，它将是来自 map 的回调命中。
<script>
console.log('calling globalMethod in 5 seconds...');
window.setTimeout(() => {
window.globalMethod('THIS IS A NEW VALUE FROM OUTSIDE ANGULAR');
}, 5000);
</script>
然后在 app.component(或任何你想要的组件)的构造函数中定义了一个窗口方法。
constructor(public zone: NgZone) {
(window as any).globalMethod = (someValue) => {
console.log('globalMethod >> ' + someValue);
this.zone.run(() => (this.name = someValue));
};
}
这行代码将强制 Angular 运行从 Angular 外部发生的更新 this.zone.run(() => (this.name = someValue));
所以我在您的应用程序中的建议是您可以在此处设置一个 *ngIf 变量，然后它会渲染您的 map 。
this.zone.run(() => (this.showMap = true));
关于javascript - 在 Angular 网站主页上调用自定义指令之前如何等待 google maps API 脚本返回，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71288988/
26
4
0
我试图让脚本暂停大约 1 秒，然后继续执行脚本，但我似乎无法弄清楚如何做。这是我的代码: function hello() { alert("Hi!") //I need about a 1
wait() 和 wait(timeout) 之间有什么区别。无论如何 wait() 需要等待通知调用，但为什么我们有 wait(timeout)？ 那么 sleep(timeout) 和 wait(
我需要做什么: 我有一个带有文件输入和隐藏文本输入的上传表单。用户上传图像，图像被操作，然后发送到远程服务器进行处理，这需要几秒钟，然后远程服务器将最终的图像发送回家庭服务器，并保存在新文件夹中。 J
大家好，我正在使用 Visual C++ 2010，尝试使用 Winsock 编写服务器/客户端应用程序...我不确定为什么，但有时服务器会在 listen() 函数处等待，有时会在 accept 处
任务描述 我为我的 Angular 应用程序实现了 CRSF 保护。服务器检查 crsf token 是否位于请求的 header “X-CSRF-TOKEN”中。如果不是，它会发送一个 HTTP 响
我想做这个例子https://stackoverflow.com/a/33585993/1973680同步。 这是正确的实现方式吗？ let times= async (n,f)=>{
我如何将 while 循环延迟到 1 秒间隔，而不会将其运行的整个代码/计算机的速度减慢到一秒延迟(只是一个小循环)。 最佳答案 Thread.sleep(1000); // do nothing f
我知道这是一个重复的问题。但是我无法通过解释来理解。我想用一个很好的例子来清楚地理解它。任何人都可以帮忙吗。 “为什么我们从同步上下文中调用 wait()、notify() 方法”。 最佳答案 当我们
我有一个 click 事件，该事件是第一次从另一个地方自动触发的。我的问题是它运行得太快，因为所需的变量仍在由 Flash 和 Web 服务定义。所以现在我有: (function ($) {
我有如下功能 function async populateInventories(custID){ this.inventories = await this.inventoryServic
我一直对“然后”不被等待的行为感到困扰，我明白其原因。然而，我仍然需要绕过它。这是我的用例。 doWork(family) { return doWork1(family)
我想我理解异步背后的想法，返回一个Future，但是我不清楚异步在一个非常基本的层面上如何表现。据我了解，它不会自动在程序中创建异步行为。例如: import 'dart:async'; main()
我正在制作一个使用异步的Flutter应用程序，但它的工作方式不像我对它的了解。所以我对异步和在 Dart 中等待有一些疑问。这是一个例子: Future someFunction() async {
我在 main.tf 中创建资源组和 vNet，并在同一文件中引用模块。问题是，模块无法从模块访问这些资源。相关代码(删除了大部分代码，只留下相关部分): main.tf: module "worke
我的代码的问题是，当代码第一次运行时，我试图获取的 dom 元素并不总是存在，如果它不存在，那么永远不会做出 promise 。 我是否可以等到 promise 做出后再尝试实现它？ 我希望我的最后一
所以，过去几天我一直在研究这段代码，并尝试实现回调/等待/任何需要的东西，但没有成功。 问题是，我如何等待响应，直到我得到两个函数的回调？ (以及我将如何实现) 简而言之，我想做的是: POST 发生
谁能帮我理解这一点吗？ 如果我们有一个类: public class Sample{ public synchronized method1(){ //Line1 .... wait();
这是我编写的代码，用于测试 wait() 和 notify() 的工作。现在我有很多疑问。 class A extends Thread { public void run() { try
我有以下代码由于语法错误而无法运行(在异步函数外等待) 如何使用 await 定义变量并将其导出？ 当我这样定义一个变量并从其他文件导入它时，该变量是只创建一次(第一次读取文件时？)还是每次导入时都创
一个简单的线程程序，其中写入器将内容放入堆栈，读取器从堆栈中弹出。 java.util.Stack; import java.util.concurrent.ExecutorService; impo
我是一名优秀的程序员,十分优秀！