javascript - Navigator.share 在 Angular 中不起作用，但在 codepen 中的测试中起作用

Question

我对 navigator.share 有疑问。

我在 codepen 中测试这段代码:

if (navigator.share) {
        navigator.share({
            title: 'Web Fundamentals',
            text: 'Check out Web Fundamentals — it rocks!',
            url: 'https://developers.google.com/web',
        })
          .then(() => console.log('Successful share'))
          .catch((error) => console.log('Error sharing', error));
      } else {
        console.log('no share');
      }
}

https://codepen.io/cookienawer/pen/ZEzpYrW?editors=1010

在我的移动设备上工作。

但是，当我将此代码放入我的 Angular 应用程序时，它并没有进入 if。

我还测试了 canShare 方法，因为这是一个测试，但我想分享图像。带有标签的图像留在 DOM 中，但这是另一个问题......

问题是我可以在 codepen 中共享任何内容，但不能在 Angular 应用程序中共享。

我发现要在 angular 中使用 navigator，我必须将这段代码放在 navigator 之前:

let varNavigator: any;

varNavigator = window.navigator; 
if (varNavigator.share) {
 ...

如果我直接执行 varNavigator.share，它会显示此错误:

core.js:1427 ERROR TypeError: (intermediate value)(intermediate value).share is not a function
    at e._next (home.component.ts:299)
    at e.__tryOrUnsub (Subscriber.js:239)
    at e.next (Subscriber.js:186)
    at e._next (Subscriber.js:127)
    at e.next (Subscriber.js:91)
    at e.notifyComplete (ForkJoinObservable.js:197)
    at e._complete (InnerSubscriber.js:32)
    at e.complete (Subscriber.js:116)
    at e._complete (Subscriber.js:134)
    at e.complete (Subscriber.js:116)

我从 URL 中获取代码:

https://developers.google.com/web/updates/2016/09/navigator-share https://developers.google.com/web/updates/2019/05/web-share-files

Answer 1

你可以试试这个

const navigator = window.navigator as any;

if (navigator.share) {
  navigator
    .share({
      title: 'Google',
      text: 'Save',
      url: 'https://google.com'
    })
    .then(() => console.log('Successful share'))
    .catch(error => console.log('Error sharing', error));
} else {
  alert('share not supported');
}

另外...确保您在 https(或本地主机)上交付网站