Map 在帶有離子的標簽中

Question

我想將 mapbox 中的 map 放入 Ionic 5 的選項卡中。它引入了一種處理選項卡的新方法，現在每個選項卡都鏈接到與延遲加載模塊對應的路由。

我在ionViewDidEnter掛鈎中調用我的createMap方法，以確保我可以訪問 HTML 元素，我將在其中創建 map。

問題是，每次選擇選項卡時都會觸發此掛鈎，並且我只需要在第一次訪問時創建一次。

如果我像在經典的 Angular 應用程序中那樣使用ngAfterViewInit鈎子，則 map 的創建太早，無法計算其尺寸以占用 100% 的高度和寬度。

關於如何做到這一點的任何想法？

快速代碼示例：

tab1.page.ts

@Component({
    selector: 'app-tab1',
    templateUrl: 'tab1.page.html',
    styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

    map: mapboxgl.Map;

    @ViewChild('mapContainer')
    public mapContainer: ElementRef

    constructor() { }

    ionViewDidEnter() {
        // create map here and load data
        // triggered on any tab visit
    }
}

選項卡路由.module.ts

const routes: Routes = [
    {
        path: 'tabs',
        component: TabsPage,
        children: [
            {
                path: 'tab1',
                loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
            },
            // etc. etc.
            {
                path: '',
                redirectTo: '/tabs/tab1',
                pathMatch: 'full'
            }
        ]
    },
    {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
    }
];

Answer 1

您可以創建一個標志（一個 boolean 屬性）設置為false ，直到ionViewDidEnter()被觸發。

在ionViewDidEnter()中，根據標志僅第一次調用創建 map 的方法。

@Component({
    selector: 'app-tab1',
    templateUrl: 'tab1.page.html',
    styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
    mapCreated = false;
    map: mapboxgl.Map;

    @ViewChild('mapContainer')
    public mapContainer: ElementRef

    constructor() { }

    ionViewDidEnter() {
        // create map here and load data
        // triggered on any tab visit
        if (!this.mapCreated) {
            // call createMap...
            this.mapCreated = true;
        }
    }
}