我如何触发angular2组件html中的元素的onload事件 [英] how do I fire onload events for elements within component html in angular2

问题描述

所以这是2合1问题.

首先，我尝试在组件html中的某个元素加载时触发一个函数.我尝试了很多方法，例如:<div [onload]="myFunction()">但是这导致函数被多次调用，准确的说是10次.我的猜测是这不是要走的路，但是我对它的正常运作还不够熟悉.我也想将元素作为参数发送.例如，执行<div #myDiv (click)="myFunction(myDiv)">确实可以，但是显然不会在所述元素的onload上触发.这是什么正确的方法，还是我有义务做一个querySelector ...

First, I am trying to fire a function when an element, within a components html, loads. I tried it numerous ways, like: <div [onload]="myFunction()"> this however results in the function being called multiple times, 10 to be exact. My guess is this is not the way to go, but I am not familiar enough to get it working properly. Also I would like to send the element along as a parameter. For example doing <div #myDiv (click)="myFunction(myDiv)"> does work, but obviously this isn't fired onload of said element. Whats the proper way here, or am I obligated to do a querySelector...

接下来是一个涉及在组件内注入ElementRef的问题.现在，文档告诉我，使用'nativeElement财产并不是很可取.我真的不明白为什么.在组件中引用元素是一件好事，不是吗?还是我正在监督分离的事情?我之所以问是因为，如果我的第一个问题不是一个选择，我想使用此元素引用对OnInit类的ngOnInit函数中的所需onload触发元素进行querySelection.

Next is a question involving the injection of the ElementRef within the component. Now, the docs tell me that using the 'nativeElement' property is not quite the way to go. I don't really understand why. Having a reference to the element in your component is a good thing, is it not? Or am I overseeing a separation of concern thing? I am asking because if my first question is not an option, I would like to use this element reference to do a querySelection of my desired onload firing elements in the ngOnInit function of the OnInit class.

欢迎所有信息，因为angular2文档还不够完善.谢谢.

All information is welcome, seeing the angular2 docs are not quite complete. Thank you.

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>

推荐答案

有关加载事件，请查看

For loading events, check out this article starting at rookie Mistake #2.

对于一般事件，我发现EventEmitter可用作子组件(自定义标记标签)向父组件告知子事件的一种方式.在子级中，创建一个自定义事件(一个用@Output()装饰的类变量)，该事件在您确定时将为.emit()，并且可以包含EventEmitter指定的<data type>的参数.然后，父级可以处理自定义事件并访问在$event中捆绑的参数.我正在使用Angular 2快速入门文件.

For general events, I found EventEmitter to be useful as a way for child components (custom markup tags) to tell the parent component about the child's events. In the child, create a custom event (a class variable decorated with @Output() ) which will .emit() whenever you determine, and can include parameters of your EventEmitter's specified <data type>. Then the parent can handle the custom event and access the parameters that you bundled within $event. I am using the Angular 2 quickstart files.

孩子脚本:

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)

这篇关于我如何触发angular2组件html中的元素的onload事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！