web-dev-qa-db-ja.com

angular2のコンポーネントhtml内の要素に対してonloadイベントを発生させる方法

したがって、これは2 in 1の質問です。

最初に、コンポーネントhtml内の要素がロードされたときに関数を起動しようとしています。 <div [onload]="myFunction()">のような多くの方法で試してみましたが、正確には10回、関数が複数回呼び出されます。私の推測では、これは進むべき道ではありませんが、適切に機能させるには十分な知識がありません。また、要素をパラメーターとして送信したいと思います。たとえば、<div #myDiv (click)="myFunction(myDiv)">を実行しても機能しますが、明らかに、これは上記の要素のonloadでは発生しません。ここでの正しい方法は何ですか、または私はquerySelectorを行う義務があります...

次は、コンポーネント内へのElementRefの注入に関する質問です。さて、 ドキュメント 「nativeElement」プロパティを使用することは、進むべき道ではないと教えてください。理由はよくわかりません。コンポーネント内の要素への参照を持つのは良いことですね。または、私は懸念事項の分離を監督していますか？最初の質問がオプションでない場合、この要素参照を使用して、OnInitクラスのngOnInit関数で目的のonload起動要素のquerySelectionを実行したいので、私は尋ねています。

すべての情報は大歓迎です。angular2のドキュメントは完全ではありません。ありがとうございました。

export class HomeComponent implements OnInit
{
    public categories: Category[];
    public items: Item[];

    constructor
    (
        public element: ElementRef,
        private _categoryService: CategoryService,
        private _itemService: ItemService,
        private _router: Router
    ){}

    public registerDropdown(element:HTMLElement): void
    {
        console.log(element);
    }

    private getCategories(): void
    {
        this._categoryService.getAll().then((categories:Category[])=> this.categories = categories);
    }

    private getItems(): void
    {
        this._itemService.getAll().then((items:Item[])=> this.items = items);
    }

    public ngOnInit(): any
    {
        this.getCategories();
        this.getItems();
    }
}
<div id="home">

    <div id="search">
        <div class="container">

            <!-- div in question, the [ngModel] is a shot in the dark -->
            <div #myDiv class="dropdown category" [ngModel]="registerDropdown(myDiv)">
                <span class="placeholder">Selecteer categorieën</span>
                <div class="the-drop">
                    <ul class="ul">
                        <li *ngFor="#category of categories">
                            <input type="checkbox" />{{category.long}}
                        </li>
                    </ul>
                </div>
            </div>
          
        </div>
    </div>
  
</div>
typescriptangularangular2-template
8
Ken

イベントの読み込みについては、 この記事 ルーキーミス＃2から始めてください。

一般的なイベントの場合、EventEmitterは、子コンポーネント（カスタムマークアップタグ）が子コンポーネントのイベントを親コンポーネントに伝える方法として役立つことがわかりました。子では、カスタムイベント（@Output()で装飾されたクラス変数）を作成します。これは、決定するたびに.emit()され、EventEmitterで指定された_<data type>_のパラメーターを含めることができます。その後、親はカスタムイベントを処理し、_$event_内でバンドルしたパラメーターにアクセスできます。 Angular 2つのクイックスタートファイルを使用しています。

Childスクリプト：

_import {Component, Output, EventEmitter} from '@angular/core';
@Component({
  selector: 'my-child',
  templateUrl: 'app/my-child.component.html'
})
export class MyChildComponent {
  @Output() childReadyEvent: EventEmitter<string> = new EventEmitter();

  ngOnInit(){
    //do any lines of code to init the child
    console.log("this executes second");
    //then finally,
    this.childReadyEvent.emit("string from child");        
  }
}
_

Parentマークアップ：

_<h3>I'm the parent</h3>
<my-child (childReadyEvent)="parentHandlingFcn($event)"></my-child>
_

Parentスクリプト：

_import {Component} from '@angular/core';
import {MyChildComponent} from './my-child.component';

@Component({
  selector: 'my-parent',
  templateUrl: 'app/my-parent.component.html',
  directives: [MyChildComponent]
})
export class MyParentComponent {

  ngOnInit(){
    console.log("this executes first");
  }

  parentHandlingFcn(receivedParam: string) {
    console.log("this executes third, with " + receivedParam); //string from child
  }

}
_

注：.emit(this)で_EventEmitter<MyChildComponent>_を試すこともできます

9
BeatriceThalo

divを使用してQueryのインスタンスを取得し、ngOnInitでregisterDropdownメソッドをトリガーし、nativeElementを渡すことができますQueryList<ElementRef>

export class HomeComponent implements OnInit{
  public categories: Category[];
  public items: Item[];

  constructor
  (
    public element: ElementRef,
    private _categoryService: CategoryService,
    private _itemService: ItemService,
    private _router: Router,
    @Query('myDiv') private elList: QueryList<ElementRef>
  ){}

  public registerDropdown(element:HTMLElement): void
  {
    console.log(element);
  }

  ...

  public ngOnInit(): any
  {
    this.getCategories();
    this.getItems();
    this.registerDropdown(elList.first.nativeElement);
  }
}
0
SnareChops

さらに読むと、スパイを実装することがこれを達成するための最良の方法であると思われます。

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#spy

0
Paul Nelligan