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