Question

说我有一个按钮：

<button (click)="clicked()" class="but">Click2</button>

和组件：

export class AppComponent {

    but = document.querySelector('.but');

    clicked(){
      console.log(this.but);
    } 

    constructor(){
    }

此处控制台输出为空，因为DOM中的按钮尚未创建，对吧？但是为什么我可以使用它的clicked()函数，如果它还没有创建..？

Answer 1

我相信这个问题是你的另一个问题Why I can't access template DOM element in the constructor of the component的延续。你有以下内容：

export class AppComponent {
    constructor(){
        button : HTMLElement = document.querySelector('button');
        refreshClickStream$ = Observable.fromEvent(this.button, 'click').subscribe();
    }

此处控制台输出为空，因为未创建DOM中的按钮，对吧？

正如我在上述答案中解释的那样，你是对的。

但是为什么我可以使用它的clicked（）函数，如果它还没有创建..？

这是因为AppComponent构造视图节点时的Angular 将绑定到按钮的click事件。由于Angular创建了这些DOM元素，因此它知道何时必须订阅。

这一切都发生在createViewNodes函数内：

function createViewNodes(view) { for (var i = 0; i < def.nodes.length; i++) { var nodeDef = def.nodes[i]; switch (nodeDef.flags) { case 1 /* TypeElement */: var el = (createElement(view, renderHost, nodeDef)); ... listenToElementOutputs(view, componentView, nodeDef, el); <--------------

了解Angular如何初始化app并创建DOM元素

1 个答案: