Question

我有一个ng2组件，其中包含以下类定义：

import { Component, OnInit, OnChanges, SimpleChanges, Input, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { SearchService } from '../../services/search.service';

@Component({
    selector: 'search',
    templateUrl: '../../../ng2/templates/search.component.html'
})

export class SearchComponent implements OnInit, OnChanges
{
    @Input() searchMetadata;

    constructor(
        private router: Router,
        private searchService: SearchService,
        public ngZone: NgZone)
    {
    }

    ngOnInit()
    {
        this.getSearchMetadata();
    }

    ngOnChanges(changes: SimpleChanges)
    {
        alert('ngOnChanges entered');
    }

    getSearchMetadata()
    {
        this.searchService
            .getSearchMetadata()
            .then(this.processSearchMetadata.bind(this))
            .then(this.validateVariableSet.bind(this))
            .then(responseObject => this.blogSearchMetadata = "TEST");
    }

    processSearchMetadata(responseObject)
    {
        this.searchMetadata = Object.assign(new SearchMetadata(), responseObject)
    }

    validateVariableSet()
    {
        alert(this.searchMetadata);
    }
}

最终的validateVariableSet（）函数验证成员变量是否按预期设置。它成功提醒了价值。但是，ngOnChanges（）不会被击中。我的理解是，用@Input（）标记的任何变量都会在变量值改变后触发ngOnChanges事件。知道差距可能在这里吗？

更新1

这是一个简单的模板html。我的目标只是获得ddlTest的处理，但是在实现* ngIf（searchMetadata）之前我不能这样做。基于之前的一些研究，使用ngOnChanges（）钩子似乎是最好的方法，但我愿意接受更合适的解决方案的建议

<router-outlet>
    [{{searchMetadata}}]
    <div *ngIf="searchMetadata">
         <select id="ddlTest">
             <option>1</option>
             <option>2</option>
             <option>3</option>
    </select>
    </div>
 </router-outlet>

更新2

以下方法有效。这很简单直接。这很hacky但它确实有效。当addJQueryHook（）被击中时，上面的ddlTest将被渲染。如果你知道一个更好的方法，请lmk！

<div *ngIf="SearchMetadata">
    <select id="ddlTest">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <div *ngIf="addJQueryHook()">
    </div>
</div>

Answer 1

好的，评论太小，无法回答。

此绑定和ngOnChanges的工作方式是这样的......

你有一些组件，我们称之为ContainerComponent。例如，在该模板中，您可以像这样使用search组件：

<search [searchMetadata]="somePropertyOnYourContainerComponent">

这会将您的search组件@Input() searchMetadata绑定到somePropertyOnYourContainerComponent，并且您的ngOnChanges会触发。

ngOnChanges（）没有在ng2组件中被击中

1 个答案: