如果窗口小於X，則更改NgbPopover的放置位置

Question

我正在使用Angular 4和ng-bootstrap的Popover組件。它工作正常，但我試圖改變它的位置，如果窗口大小小於600px。我找不到這個選項。我的設置是與此類似：

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？

Answer 1

嘗試指定的位置屬性是這樣的：

[placement]="getPlacement()" 

則此方法添加到組件的類：

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