honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: fix dynamic component loader example (#22181) 

closes #21903

PR Close #22181
This commit is contained in:
Kapunahele Wong 2018-02-12 16:34:38 -05:00 committed by Alex Eagle
parent f8749bfb70
commit c82cef8bc6
3 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts
View File

@ -1,12 +1,12 @@
// #docregion
import { Component, Input, AfterViewInit, ViewChild, ComponentFactoryResolver, OnDestroy } from '@angular/core';
import { Component, Input, OnInit, ViewChild, ComponentFactoryResolver, OnDestroy } from '@angular/core';
import { AdDirective } from './ad.directive';
import { AdItem } from './ad-item';
import { AdComponent } from './ad.component';
@Component({
selector: 'app-add-banner',
selector: 'app-ad-banner',
// #docregion ad-host
template: `
<div class="ad-banner">
@ -17,16 +17,15 @@ import { AdComponent } from './ad.component';
// #enddocregion ad-host
})
// #docregion class
export class AdBannerComponent implements AfterViewInit, OnDestroy {
export class AdBannerComponent implements OnInit, OnDestroy {
@Input() ads: AdItem[];
currentAddIndex: number = -1;
currentAdIndex: number = -1;
@ViewChild(AdDirective) adHost: AdDirective;
subscription: any;
interval: any;
constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
ngAfterViewInit() {
ngOnInit() {
this.loadComponent();
this.getAds();
}
@ -36,8 +35,8 @@ export class AdBannerComponent implements AfterViewInit, OnDestroy {
}
loadComponent() {
this.currentAddIndex = (this.currentAddIndex + 1) % this.ads.length;
let adItem = this.ads[this.currentAddIndex];
this.currentAdIndex = (this.currentAdIndex + 1) % this.ads.length;
let adItem = this.ads[this.currentAdIndex];
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);

2
aio/content/examples/dynamic-component-loader/src/app/app.component.ts
View File

@ -8,7 +8,7 @@ import { AdItem } from './ad-item';
selector: 'app-root',
template: `
<div>
<app-add-banner [ads]="ads"></app-add-banner>
<app-ad-banner [ads]="ads"></app-ad-banner>
</div>
`
})

4
aio/content/guide/dynamic-component-loader.md
View File

@ -109,9 +109,9 @@ Take it step by step. First, it picks an ad.
The `loadComponent()` method chooses an ad using some math.
First, it sets the `currentAddIndex` by taking whatever it
First, it sets the `currentAdIndex` by taking whatever it
currently is plus one, dividing that by the length of the `AdItem` array, and
using the _remainder_ as the new `currentAddIndex` value. Then, it uses that
using the _remainder_ as the new `currentAdIndex` value. Then, it uses that
value to select an `adItem` from the array.