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移动到一个单独的组件，并将body作为您建议的父级。要从原始组件控制此组件，您可以使用ngOnInit和ngOnDestroy生命周期钩子将自动完成组件的存在切换到结果div组件。使用单件服务（由您的应用程序模块提供）来存储自动完成组件的存在状态。

Answer 2

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

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

Answer 3

您可以将AutocompleteComponent的构造函数中的组件html移动到任何您想要的地方

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

但是你必须在组件破坏时移除组件html，即在ngOnDestroy（）函数中

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

如何使用angular2向body添加元素

3 个答案: