typescript - ฉันจะเรียกใช่อีเวนต์ onload สำหรับองค์ประกอบภายใน HTML ของคอมโพเนนต์ใน angular2 ได้อย่างไร

ดังนั้นนี่คือคำถามแบบ 2 ใน 1

ก่อนอื่น ฉันพยายามที่จะเรียกใช้งานฟังก์ชันเมื่อมีการโหลดองค์ประกอบภายใน HTML ของคอมโพเนนต์ ฉันได้ลองหลายวิธี เช่น: <div [onload]="myFunction()"> อย่างไรก็ตาม วิธีนี้ทำให้ฟังก์ชันถูกเรียกหลายครั้ง รวมแล้ว 10 ครั้ง ฉันเดาว่านี่ไม่ใช่วิธีที่ถูกต้อง แต่ฉันยังไม่ค่อยคุ้นเคยพอที่จะทำให้มันทำงานได้อย่างถูกต้อง นอกจากนี้ฉันยังต้องการส่งองค์ประกอบไปพร้อมกับเป็นพารามิเตอร์ เช่น การทำ <div #myDiv (click)="myFunction(myDiv)"> ก็ได้ผล แต่แน่นอนว่านี่ไม่ได้ถูกเรียกเมื่อองค์ประกอบถูกโหลด วิธีที่ถูกต้องคืออะไร หรือฉันจำเป็นต้องใช้ querySelector...

ต่อไปเป็นคำถามเกี่ยวกับการฉีด ElementRef ภายในคอมโพเนนต์ ตอนนี้เอกสารแจ้งว่าการใช้คุณสมบัติ 'nativeElement' ไม่ใช่วิธีที่ถูกต้องจริงๆ ฉันไม่เข้าใจว่าทำไม การมีการอ้างอิงถึงองค์ประกอบในคอมโพเนนต์ของคุณถือเป็นสิ่งที่ดีใช่ไหม หรือฉันกำลังมองข้ามเรื่องการแยกหน้าที่อยู่หรือเปล่า ฉันถามเพราะถ้าคำถามแรกของฉันไม่ใช่ตัวเลือก ฉันก็อยากใช้การอ้างอิงองค์ประกอบนี้เพื่อทำ querySelection ขององค์ประกอบที่ต้องการให้ทำงานตอนโหลดในฟังก์ชัน ngOnInit ของคลาส OnInit

ข้อมูลทั้งหมดยินดีต้อนรับ เนื่องจากเอกสารของ 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>

คำตอบ #1

สำหรับเหตุการณ์การโหลด ตรวจสอบบทความนี้เริ่มต้นที่ข้อผิดพลาดสำหรับมือใหม่ #2

สำหรับเหตุการณ์ทั่วไป ผมพบว่า EventEmitter มีประโยชน์ในการให้คอมโพเนนต์ลูก (แท็กมาร์กอัปที่กำหนดเอง) บอกคอมโพเนนต์พ่อเกี่ยวกับเหตุการณ์ของลูก ในคอมโพเนนต์ลูก ให้สร้างเหตุการณ์ที่กำหนดเอง (ตัวแปรในคลาสที่ตกแต่งด้วย @Output()) ซึ่งจะ .emit() เมื่อคุณกำหนด และสามารถรวมพารามิเตอร์ของ <data type> ที่คุณระบุใน EventEmitter จากนั้นคอมโพเนนต์พ่อสามารถจัดการเหตุการณ์ที่กำหนดเองและเข้าถึงพารามิเตอร์ที่คุณรวมไว้ภายใน $event ผมกำลังใช้ไฟล์ Angular 2 quickstart

เด็ก สคริปต์:

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");        
  }
}

พาเรนต์ มาร์คอัป:

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

สคริปต์ผู้ปกครอง:

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
  }

}

หมายเหตุ: คุณยังสามารถลองใช้ EventEmitter<MyChildComponent> กับ .emit(this) ได้

คำตอบ #2

คุณสามารถดึงอินสแตนซ์ของ 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);
  }
}