[Angular] Create a simple *ngFor

In this post, we are going to create our own structure directive *ngFor.

What it should looks like in HTML?

    <div>

      <ul>

        <li *myFor="let item of items; let i = index;">

          {{ i }} Member: {{ item.name | json }}

        </li>

        <template myFor [myForOf]="items" let-item let-i="index">

          <li>{{ i }} Member: {{ item.name | json }}</li>

        </template>

      </ul>

    </div>

So here, we have a '*myFor' directive. It also use 'myForOf' direcitve. And a implicit value 'item'.

Notice that:

        <li *myFor="let item of items; let i = index;">

          {{ i }} Member: {{ item.name | json }}

        </li>

and

        <template myFor [myForOf]="items" let-item let-i="index">

          <li>{{ i }} Member: {{ item.name | json }}</li>

        </template>

They have the same effect.

Now let's create myFor directive:

import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';

@Directive({

  selector: '[myFor][myForOf]'

})

export class MyForDirective {

  @Input()

  set myForOf(collection) {

    this.view.clear();

    collection.forEach((item, index) => {

      this.view.createEmbeddedView(

        this.template,

        {

          $implicit: item,

          index

        }

      )

    });

  }

  constructor(

    private view: ViewContainerRef,

    private template: TemplateRef<any>

  ) {

    // this.template will point to the host element

  }

}

It is good to clear the view every time we generate new embedded view:

this.view.clear();

Also we gave implicit 'value' and 'index'.

      this.view.createEmbeddedView(

        this.template,

        {

          $implicit: item, // let-item

          index // let-i="index"

        }

      )

巴特西

[Angular] Create a simple *ngFor

最新文章

热门文章