Question

在我的Ionic应用程序中，我有一个选项卡，其中包含带有地图的组件（Mapbox）。第一次打开页面时，地图创建良好。但是，当我在此选项卡中使用（）进行更新时，不会创建地图（显示为空白）。这是我的代码简化：

Tab3.page.html 在此页面中，我正在“注入”我的全图组件

<ion-header no-border>
    <ion-toolbar>
        <ion-title>
            App
        </ion-title>
    </ion-toolbar>
    <div style="margin: 10px"></div>

    <ion-grid>
        <ion-row>
            <ion-col size="12" size-lg="3" size-md="4" size-sm="6" size-xs="12">
                <div class="postfullmap">
                    <ion-item-sliding>
                        <app-fullmap></app-fullmap>
                    </ion-item-sliding>
                </div>
            </ion-col>
        </ion-row>
    </ion-grid>

</ion-header>

<ion-content color="light">

    <!-- Refresher -->
    <ion-refresher slot="fixed" (ionRefresh)="reload($event)">
        <ion-refresher-content></ion-refresher-content>
    </ion-refresher>

    <!-- Posts -->
    <app-myposts [myposts]="posts"></app-myposts>

</ion-content>

Tab3.page.ts

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page implements OnInit {

  posts: Post[] = [];
  enabled = true;

  constructor( private userService: UserService,
               private postsService: PostsService,
               private fullmap: FullmapComponent ) {}

  ngOnInit() {
    this.reload();
    this.postsService.newPost.subscribe( post => {
      this.posts.unshift( post );
    });
  }

  reload( event? ) {
    setTimeout( () => {
      this.following( event, true );
      this.posts = [];
      this.enabled = true;
    }, 2000);
  }

  async following( event?, pull: boolean = false  ) {
    .....
    });
  }

}

fullmap.component.html

<div id='fullmap' #fullmap></div>

fullmap.component.ts

declare var mapboxgl: any;
let map;

@Component({
  selector: 'app-fullmap',
  templateUrl: './fullmap.component.html',
  styleUrls: ['./fullmap.component.scss'],
})
export class FullmapComponent implements OnInit, AfterContentInit {

  private fullmap: ElementRef;

  // @ViewChild('fullmap', {static: false}) fullmap: ElementRef;
  @ViewChild('fullmap', {static: false}) set content(fullmap: ElementRef) {
    this.fullmap = fullmap;
  }

  constructor( ) {
  }

  ngAfterViewInit() {

  }

  public ngAfterContentInit() {

    setTimeout( () => {

      mapboxgl.accessToken = 'mytoken';

      map = new mapboxgl.Map({
        container: this.fullmap.nativeElement,
        style: 'mapbox://styles/.....',
        center: [.....],
        zoom: [....],
        attributionControl: false
      });

    }, 2000);
  }

  ngOnInit() {

  }

}

刷新时出现的错误是下一个：

core.js:9110 ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at fullmap.component.ts:50
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34182)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at invokeTask (zone-evergreen.js:465)
    at ZoneTask.invoke (zone-evergreen.js:454)
    at timer (zone-evergreen.js:2650)

我尝试过ChangeDetectorEf（另一个错误），更改代码（在ngAfterViewInit，onInit ...内），并在获得帖子时使用serviceEmitter进行服务。我对这个问题感到沮丧。

当执行离子刷新器时，@ viewchild失败

0 个答案: