如何在Ionic 6/电容器中使用不同的admob方法

Question

我有一个ion选项卡栏组件，我想显示BannerAd。我为我的离子应用程序使用了以下库。

https://github.com/capacitor-community/admob

要显示添加，我必须使用边距，因为添加会与选项卡栏重叠。我看过医生。

保证金横幅。默认值为0px；如果位置为BOTTOM_CENTER，则边距为是页边空白底部。如果位置为TOP_CENTER，则边距为边距顶部。

我有两种方法可以在我的应用程序中显示广告。BannerAd方法仅适用于没有离子选项卡栏的页面。另一个用于包含离子选项卡栏的页面。这是我的代码：

admob.service.ts

import { Injectable } from '@angular/core';
import { Platform } from '@ionic/angular';
import { AdMob, BannerAdOptions, BannerAdSize, BannerAdPosition } from '@capacitor-community/admob';

@Injectable({
providedIn: 'root'
})
export class AdMobService {

constructor(private platform: Platform) { }

async bannerAd(admobId: string) {
const options: BannerAdOptions = {
adId: admobId,
adSize: BannerAdSize.FULL_BANNER,
position: BannerAdPosition.BOTTOM_CENTER,
margin: 0,
isTesting: true,
npa: true
};

await this.platform.ready();

await AdMob.initialize({
requestTrackingAuthorization: true,         
initializeForTesting: true,
}).catch(err => console.error('Could not init Admob', err));

await AdMob.showBanner(options).catch(err => console.error('Could not init Admob banner', err));
}

async bannerAdTab(admobId: string) {
const options: BannerAdOptions = {
adId: admobId,
adSize: BannerAdSize.FULL_BANNER,
position: BannerAdPosition.BOTTOM_CENTER,
margin: 50,
isTesting: true,
npa: true
};

await this.platform.ready();

await AdMob.initialize({
requestTrackingAuthorization: true,      
initializeForTesting: true,
}).catch(err => console.error('Could not init Admob', err));

await AdMob.showBanner(options).catch(err => console.error('Could not init Admob banner', err));
}
}

我使用这样的方法是我的页面：

主页.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';
import { AdMobService } from 'src/app/services/admob.service';
@Component({
selector: 'app-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
constructor(private admob: AdMobService) { }
ngOnInit() {
this.admob.bannerAd("admobid");
}

}

在这样的标签页中：

选项卡页面.ts

import { Component, OnInit } from '@angular/core';
import { AdMobService } from 'src/app/services/admob.service';
@Component({
selector: 'app-tab',
templateUrl: './tab.page.html',
styleUrls: ['./tab.page.scss'],
})
export class TabPage implements OnInit {
constructor(private admob: AdMobService) { }
ngOnInit() {
this.admob.bannerAdTab("AdmobId");
}
}

bannerAd方法效果很好，但当我导航到选项卡页面时，它不会应用边距。

如何在页面中使用不同的admob方法？

第二个问题：

我是在组件中还是在调用组件的页面中使用admob服务？

Answer 1

当横幅广告大小发生变化时，您需要添加一个事件侦听器，然后将边距添加到ion-router-outlet中。

试试这样的东西：

import { Injectable } from '@angular/core';
import { Platform } from '@ionic/angular';
import { AdMob, BannerAdOptions, BannerAdSize, BannerAdPosition, BannerAdPluginEvents } from '@capacitor-community/admob';

@Injectable({
providedIn: 'root'
})
export class AdMobService {

private appMargin:number = 0;
constructor(private platform: Platform) {
this.init();
}

async init() {
await this.platform.ready();
await AdMob.initialize({
requestTrackingAuthorization: true,         
initializeForTesting: true,
}).catch(err => console.error('Could not init Admob', err));
this.eventOnAdSize = AdMob.addListener(BannerAdPluginEvents.SizeChanged, (info: any) => {
// Subscribe Change Banner Size
this.appMargin = parseInt(info.height, 10);
if (this.appMargin > 0) {
const app: HTMLElement = document.querySelector('ion-router-outlet');
app.style.marginBottom = this.appMargin + 'px';
}
});
}
async bannerAd(admobId: string) {
const options: BannerAdOptions = {
adId: admobId,
adSize: BannerAdSize.FULL_BANNER,
position: BannerAdPosition.BOTTOM_CENTER,
margin: 0,
isTesting: true,
npa: true
};

await AdMob.showBanner(options).catch(err => console.error('Could not init Admob banner', err));
}

async bannerAdTab(admobId: string) {
const options: BannerAdOptions = {
adId: admobId,
adSize: BannerAdSize.FULL_BANNER,
position: BannerAdPosition.BOTTOM_CENTER,
margin: 50,
isTesting: true,
npa: true
};

await AdMob.showBanner(options).catch(err => console.error('Could not init Admob banner', err));
}
}