我有一个离子标签栏组件,我想显示一个 BannerAd。我在我的离子应用程序中使用了以下库。
https://github.com/capacitor-community/admob 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");
}
}
The bannerAd方法效果很好,但是当我导航到我的选项卡页面时,它不应用margin.
如何在我的页面中使用不同的 admob 方法?
第二个问题:
我是在组件中还是在调用组件的页面中使用admob服务?