如何修复 Ionic 中的“没有导出的成员 'VeiwChild'”错误

Posted

技术标签:

【中文标题】如何修复 Ionic 中的“没有导出的成员 \'VeiwChild\'”错误【英文标题】:How to fix 'has no exported member 'VeiwChild'' error in Ionic如何修复 Ionic 中的“没有导出的成员 'VeiwChild'”错误 【发布时间】:2017-12-09 17:22:25 【问题描述】:

所以我正在尝试将谷歌地图导入到我的 ionic 2 应用程序中。到目前为止,一切正常。我从@angular/core 导入 VeiwChild 包时出现问题。因此,每次我运行代码时,它都会给我同样的错误。

` 模块 '"C:/Users/Jay/Documents/maps/node_modules/@angular/core/core"' 没有导出成员 'VeiwChild'。

C:/Users/Jay/Documents/maps/src/pages/home/home.ts

从'@angular/core'导入组件,VeiwChild;

从 'ionic-angular' 导入 NavController ; `

这是我的 index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">
 
  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>
  <script src="cordova.js"></script>
  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) 
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    
  </script>-->

  <link href="build/main.css" rel="stylesheet">

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>
  <script src="http://maps.google.com/maps/api/js?key=AIzaSyB0i4Rwgm2oyIOevkQNPydd1BwXJOV2WBk"></script>
  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

这是 home.html 代码

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<div #map id="map"></div>
</ion-content>

这是我的 home.scss 代码

page-home 
    .ios, .md 

        home-page 

          .scroll 
            height: 100%
          

          #map 
            width: 100%;
            height: 100%;
          

        

    


最后是我的 home.ts 代码

import  Component, VeiwChild  from '@angular/core';
import  NavController  from 'ionic-angular';

declare var google;

@Component(
  selector: 'page-home',
  templateUrl: 'home.html'
)
export class HomePage 
	@VeiwChild('map') mapElement;
	map: any;

  constructor(public navCtrl: NavController) 

  

  ionVeiwDidLoad()
  
  	this.loadMap();
  

  loadMap()
 
    let latLng = new google.maps.LatLng(-34.9290, 138.6010);
 
    let mapOptions = 
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    
 
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
 
  

我不完全确定为什么我不断收到此错误。这是我用作参考的视频。 link

【问题讨论】:

【参考方案1】:

这只是一个错字。

这个:

import  Component, VeiwChild  from '@angular/core';

应该是这样的:

import  Component, ViewChild  from '@angular/core';

View不是Veiw

注意:在其他几个地方也有拼写错误,例如这里:

@VeiwChild('map') mapElement;

【讨论】:

您还有其他一些 veiw 的拼写错误。我建议使用可以检查语法的编辑器,例如 Visual Studio 代码 您的意思是在我的回答中添加您的评论吗?还是原问题? 我猜是原文...我只是想添加到您的评论中,而不是因为您有错字。 @VeiwChild('map') 也是错误的。 啊。我应该将其添加到我的答案中吗? 由你决定 :)...他应该使用会告诉他的 IDE,而不是来自 *** 的人。

以上是关于如何修复 Ionic 中的“没有导出的成员 'VeiwChild'”错误的主要内容,如果未能解决你的问题,请参考以下文章

如何修复 Ionic 类型中缺少“CameraPreview”?

Ionic 2:如何修复 moment.js 错误的使用

Ionic 构建/运行 ios 失败,错误代码为 65。如何修复?

如何修复:“@angular/fire”'没有导出成员 'AngularFireModule'.ts(2305) ionic、firebase、angular

如何修复 Ionic 在科尔多瓦 5.0.0 中无法工作

如何使用 Ionic 4 在 IOS 上修复“cordova-plugin-googlemaps 尚未安装或准备就绪”