如何使用angular2将元素添加到主体

Question

我拥有的组件是一个自动完成器。然而，它位于一个固定的高度div和结果div需要亲生的身体和定位，以正确显示。在angular2中做这件事的正确方法是什么？

@Component({
    selector: 'autocomplete',
    template: `
        <div class="container" >
            <div>
              <input id="search" type="text" class="validate filter-input" [(ngModel)]=query (keyup)="filter()">
            </div>
            <div *ngIf="filteredList.length > 0">
                <ul *ngFor="let item of filteredList" >
                    <li >
                        <a (click)="select(item)">{{item}}</a>
                    </li>
                </ul>
            </div>
        </div>`,
})
export class AutocompleteComponent {
    private items: string[];
    public query: string;
    public filteredList: string[];
    public elementRef: ElementRef;

    constructor(element: ElementRef) {
        this.items = ['foo', 'bar', 'baz'];
        this.filteredList = [];
        this.query = '';
        this.elementRef = element;
    }
    filter() {
        if (this.query !== '') {
            this.filteredList = this.items.filter(function(item) {
                return item.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
            }.bind(this));
        }
        else {
            this.filteredList = [];
        }
    }
}

Answer 1

我还没有找到一个组件可以将元素添加到父级的方法，因此我建议如下(对我有用)：

您应该将结果div移动到单独的组件中，并按照您的建议将主体作为父组件。要从原始组件中控制该组件，可以使用ngOnInit和ngOnDestroy生命周期挂钩将自动完成组件的存在切换到结果div组件。使用单例服务(由应用程序模块提供)来存储自动完成组件存在的状态。

Answer 2

您可以在AutocompleteComponent的构造函数中任意移动组件html。

constructor(){
 document.querySelector('body').appendChild(elementRef.nativeElement);
            }

，但当组件破坏时，必须删除组件html，例如在ngOnDestroy()函数中

ngOnDestroy(){
 document.querySelector('body').removeChild(elementRef.nativeElement); 
}

Answer 3

您可以在一个页面中引导多个角应用程序，并共享一个服务，以便能够进行通信。

有关示例，请参见How to dynamically create bootstrap modals as Angular2 components?。代码示例尚未更新为RC.5。