35

Angular 1 ではng-repeat、反復が完了したときにコールバック メソッドを呼び出すために使用するカスタム ディレクティブ ("repeater-ready") を作成しました。

if ($scope.$last === true)
{
    $timeout(() =>
    {
        $scope.$parent.$parent.$eval(someCallbackMethod);
    });
}

マークアップでの使用:

<li ng-repeat="item in vm.Items track by item.Identifier"
    repeater-ready="vm.CallThisWhenNgRepeatHasFinished()">

ngForAngular 2 で同様の機能を実現するにはどうすればよいですか?

4

8 に答える 8

22

次のようなものを使用できます（ngFor ローカル変数）：

<li *ngFor="#item in Items; #last = last" [ready]="last ? false : true">

次に、セッターで入力プロパティの変更をインターセプトできます

  @Input()
  set ready(isReady: boolean) {
    if (isReady) someCallbackMethod();
  }
于 2016-03-06T12:04:09.627 に答える
6

私にとっては、Typescript を使用して Angular2 で作業しています。

<li *ngFor="let item in Items; let last = last">
  ...
  <span *ngIf="last">{{ngForCallback()}}</span>
</li>

次に、この関数を使用して処理できます

public ngForCallback() {
  ...
}
于 2017-01-07T14:31:34.920 に答える
3

RC3 で、受け入れられた回答が機能しないことがわかりました。しかし、私はこれに対処する方法を見つけました。私にとっては、コンポーネントをアップグレードするために ngFor が MDL componentHandler の実行をいつ終了したかを知る必要があります。

まず、ディレクティブが必要です。

upgradeComponents.directive.ts

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

declare var componentHandler : any;

@Directive({ selector: '[upgrade-components]' })
export class UpgradeComponentsDirective{

    @Input('upgrade-components')
    set upgradeComponents(upgrade : boolean){
        if(upgrade) componentHandler.upgradeAllRegistered();
    }
}

次にこれをコンポーネントにインポートし、ディレクティブに追加します

import {UpgradeComponentsDirective} from './upgradeComponents.directive';

@Component({
    templateUrl: 'templates/mytemplate.html',
    directives: [UpgradeComponentsDirective]
})

ここで、HTML で「upgrade-components」属性を true に設定します。

 <div *ngFor='let item of items;let last=last' [upgrade-components]="last ? true : false">

この属性が true に設定されている場合、@Input() 宣言の下でメソッドが実行されます。私の場合、それは componentHandler.upgradeAllRegistered() を実行します。ただし、選択したものには何でも使用できます。ngFor ステートメントの「last」プロパティにバインドすることで、終了時に実行されます。

[attr.upgrade-components] を使用する必要はありませんが、これは真正なディレクティブであるため、ネイティブ属性ではありません。

于 2016-06-27T04:54:01.670 に答える