56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
|
// #docregion
|
||
|
|
import { Component, Input, AfterViewInit, ViewChild, ComponentFactoryResolver, OnDestroy } from '@angular/core';
|
||
|
|
|
||
|
|
import { AdDirective } from './ad.directive';
|
||
|
|
import { AdItem } from './ad-item';
|
||
|
|
import { AdComponent } from './ad.component';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'add-banner',
|
||
|
|
// #docregion ad-host
|
||
|
|
template: `
|
||
|
|
<div class="ad-banner">
|
||
|
|
<h3>Advertisements</h3>
|
||
|
|
<template ad-host></template>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
// #enddocregion ad-host
|
||
|
|
})
|
||
|
|
export class AdBannerComponent implements AfterViewInit, OnDestroy {
|
||
|
|
@Input() ads: AdItem[];
|
||
|
|
currentAddIndex: number = -1;
|
||
|
|
@ViewChild(AdDirective) adHost: AdDirective;
|
||
|
|
subscription: any;
|
||
|
|
interval: any;
|
||
|
|
|
||
|
|
constructor(private _componentFactoryResolver: ComponentFactoryResolver) { }
|
||
|
|
|
||
|
|
ngAfterViewInit() {
|
||
|
|
this.loadComponent();
|
||
|
|
this.getAds();
|
||
|
|
}
|
||
|
|
|
||
|
|
ngOnDestroy() {
|
||
|
|
clearInterval(this.interval);
|
||
|
|
}
|
||
|
|
|
||
|
|
loadComponent() {
|
||
|
|
this.currentAddIndex = (this.currentAddIndex + 1) % this.ads.length;
|
||
|
|
let adItem = this.ads[this.currentAddIndex];
|
||
|
|
|
||
|
|
let componentFactory = this._componentFactoryResolver.resolveComponentFactory(adItem.component);
|
||
|
|
|
||
|
|
let viewContainerRef = this.adHost.viewContainerRef;
|
||
|
|
viewContainerRef.clear();
|
||
|
|
|
||
|
|
let componentRef = viewContainerRef.createComponent(componentFactory);
|
||
|
|
(<AdComponent>componentRef.instance).data = adItem.data;
|
||
|
|
}
|
||
|
|
|
||
|
|
getAds() {
|
||
|
|
this.interval = setInterval(() => {
|
||
|
|
this.loadComponent();
|
||
|
|
}, 3000);
|
||
|
|
}
|
||
|
|
}
|