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

尝试像这样指定展示位置属性：

if 'makemigrations' in sys.argv
    INSTALLED_APPS.remove('conflicting_third_party_app')

然后将此方法添加到组件的类中：

[placement]="getPlacement()"

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

1 个答案: