如果窗口小于X，则更改NgbPopover的放置位置

问题描述：

我正在使用Angular 4和ng-bootstrap的Popover组件。它工作正常，但我试图改变它的位置，如果窗口大小小于600px。我找不到这个选项。我的设置是与此类似：如果窗口小于X，则更改NgbPopover的放置位置

import { Component, NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { JsonpModule } from '@angular/http'; 
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 
import { NgbdPopoverTplcontent } from './popover-tplcontent'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div class="container-fluid"> 

    <hr> 
    <p> 
     This is a demo plnkr forked from the <strong>ng-bootstrap</strong> project: Angular powered Bootstrap. 
     Visit <a href="https://ng-bootstrap.github.io/" target="_blank">https://ng-bootstrap.github.io</a> for more widgets and demos. 
    </p> 
    <hr> 

    <ngbd-popover-tplcontent></ngbd-popover-tplcontent> 
    </div> 
    ` 
}) 
export class App { 
} 

@NgModule({ 
    imports: [BrowserModule, FormsModule, ReactiveFormsModule, JsonpModule, NgbModule.forRoot()], 
    declarations: [App, NgbdPopoverTplcontent] 
    bootstrap: [App] 
}) 
export class AppModule {}

HTML：

<p> 
    Popovers can contain any arbitrary HTML, Angular bindings and even directives! 
    Simply enclose desired content in a <code>&lt;ng-template&gt;</code> element. 
</p> 

<ng-template #popContent>Hello, <b>{{name}}</b>!</ng-template> 
<button type="button" class="btn btn-secondary" [ngbPopover]="popContent" popoverTitle="Fancy content" placement="right"> 
    I've got markup and bindings in my popover! 
</button>

Plunker

我怎样才能改变位置顶部if window <= 600？

答

尝试指定的位置属性是这样的：

[placement]="getPlacement()"

则此方法添加到组件的类：

public getPlacement(): string { 
    return window.innerHeight <= 600 ? 'top' : 'right'; 
}

如果窗口小于X，则更改NgbPopover的放置位置

相关推荐