typescript - 如何在 angular2 中为组件 html 中的元素触发 onload 事件

Question

所以这是一个 2 合 1 的问题。

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

接下来是一个涉及在组件中注入(inject) ElementRef 的问题。现在，the docs告诉我使用 '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>

Answer 1

有关加载事件，请查看 this article从菜鸟错误 #2 开始。

对于一般事件，我找到了 EventEmitter作为子组件(自定义标记标签)告诉父组件有关子事件的一种方式很有用。在 child 中，创建一个自定义事件(用 @Output() 修饰的类变量)，它将 .emit()无论何时您确定，并且可以包含您的 EventEmitter 的指定参数 <data type> .然后 parent 可以处理自定义事件并访问您捆绑在 $event 中的参数.我正在使用 Angular 2 快速入门文件。

子脚本:

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)