typescript 错误：Angular8项目中的“Navigator”上不存在属性“contacts”和“mozContacts”

b91juud3 于 2023-02-25 发布在 TypeScript

关注(0)|答案(3)|浏览(192)

我想从我的Angular应用打开用户联系人页面。我在whatwebcando.today中看到一个示例，我尝试使用openContacts（）方法在我的项目上运行它，该方法应在用户单击按钮时运行：
这是stackblitz中的测试项目

openContacts(){
    this.supported = ('contacts' in (navigator as any) && 'ContactsManager' in window);
    var api = (navigator.contacts || navigator.mozContacts);
    if (api && !!api.select) { // new Chrome API
      api.select(['name', 'email'], {multiple: true})
     .then(function (contacts) {
       console.log('Found ' + contacts.length + ' contacts.');
       if (contacts.length) {
         console.log('First contact: ' + contacts[0].name + ' (' + contacts[0].email + ')');
       }
      })
    .catch(function (err) {
      console.log('Fetching contacts failed: ' + err.name);
    });
  
   } else if (api && !!api.find) { // old Firefox OS API
     var criteria = {
     sortBy: 'familyName',
     sortOrder: 'ascending'
    };
    api.find(criteria)
   .then(function (contacts) {
    console.log('Found ' + contacts.length + ' contacts.');
    if (contacts.length) {
      console.log('First contact: ' + contacts[0].givenName[0] + ' ' + 
     contacts[0].familyName[0]);
    }
  })
  .catch(function (err) {
    console.log('Fetching contacts failed: ' + err.name);
  });
  
} else {
console.log('Contacts API not supported.');
}}

但它不起作用，并且有两个错误：

当我在我的电话中测试原始的例子它工作得很好，但是当我在我的电话中测试我自己的项目它不工作.有任何方法来解决这问题吗？
感谢是进步。

typescript

来源：https://stackoverflow.com/questions/64738524/error-property-contacts-and-mozcontacts-does-not-exist-on-navigator-in-an

3条答案

按热度按时间

nnt7mjpx1#

我将使用以下替换代码（将navigator视为any类型，而不是Navigator）：

var api = ( 
   (navigator as any).contacts || (navigator as any).mozContacts
);

赞(0）回复(0）举报 2023-02-25

7kqas0il2#

得到一些帮助，我终于解决了这个问题。宣言应该是这样的：

interface NavigatorContacts extends Navigator {
  readonly contacts: ContactsManager;
}

interface ContactsManager {
  getProperties(): Promise<string[]>;
  select(properties: string[], options?: any): Promise<any>;
}
declare const navigator: NavigatorContacts;

赞(0）回复(0）举报 2023-02-25

xxe27gdn3#

上面的方法对我不起作用，但是创建一个包含以下内容的global.d.ts文件确实起了作用：

declare interface Navigator extends NavigatorExtended {}

interface NavigatorExtended {
    readonly contacts: ContactsManager;
}
// I use only name and tel, but feel free to adjust it https://w3c.github.io/contact-picker/#contacts-manager
type IContact = {
    name: string[],
    tel: string[],
}
interface ContactsManager {
    getProperties(): Promise<string[]>;
    select(properties: string[], options?: any): Promise<IContact[]>;
}

赞(0）回复(0）举报 2023-02-25

我来回答

typescript 错误：Angular8项目中的“Navigator”上不存在属性“contacts”和“mozContacts”

3条答案

相关问题

热门标签

最新问答