小编Ago*_*ony的帖子

我有一个"仪表板",可以加载已配置的元素.仪表板模板具有以下内容:

  <div class="dash-container" [ngGrid]="gridConfig">
    <div *ngFor="let box of boxes; let i = index"
       [(ngGridItem)]="box.config"
       (onItemChange)="updateItem(i, $event)"
       (onResize)="onResize(i, $event)"
       (onDrag)="onDrag(i, $event)"
       (onDragStop)="onDragStop(i,$event)"
       [ngClass]="box.class"
     >
      <div class="handle"><h4>{{box.title}}</h4></div>
      <div [innerHTML]= "box.content"></div>
    </div>
  </div>

现在<div [innerHTML]= "box.content"></div>不行,因为非标准元素被消毒了.运行最新的Angular 2.4.6(RC 6).

我看一下我能找到的动态组件的例子 - 但我看到的只是他们只是将组件添加到当前组件 - 但我需要它们在一个非常特定的div中,如上例所示.

ComponentFactoryResolver通常与...一起使用@ViewChild.但我不能在一个循环中这样做:

ngAfterViewInit() {
    const dashWidgetsConf = this.widgetConfigs();
    for (var i = 0; i < dashWidgetsConf.length; i++) {
      const conf = dashWidgetsConf[i];

      @ViewChild(conf.id, {read: ViewContainerRef}) var widgetTarget: ViewContainerRef;

      var widgetComponent = this.componentFactoryResolver.resolveComponentFactory(UnitsComponent);
      widgetTarget.createComponent(widgetComponent);
    }
  }

@viewchild给'装饰者在这里无效'.如何从conf列表中加载组件(在循环中)并将它们添加到组件中的特定div(divs …

组件是https://github.com/valor-software/ngx-bootstrap 下拉菜单。

在模板中我有这个：

    <span dropdown placement="bottom right">
      <a id="droplist-label" href="javascript:void(0)" dropdownToggle>
          <span>{{conf.title}}</span>
      </a>
      <ul class="dropdown-menu pull-right" *dropdownMenu>
        <li *ngFor="let item of items">
          <a class="dropdown-item" (click)="listClick(item.value)" href="javascript:void(0)">{{item.label}}</a>
        </li>
      </ul>
    </span>

在单击标签之前不会添加 ul - 因此我无法在测试中访问它。

调用点击：

let droplist = fixture.debugElement.query(By.css('#droplist-label')).nativeElement;
droplist.click();

不起作用 - 如果我尝试寻找dropdown-menu它是空的：

it('should test if droplist has title',  async(() => {
    fixture.detectChanges();
    let droplist = fixture.debugElement.query(By.css('#droplist-label')).nativeElement;
    droplist.click();

    fixture.whenStable().then(() => {
        let droplistOptions = fixture.debugElement.queryAll(By.css('.dropdown-item'));
        expect(droplistOptions.length).toBeGreaterThan(0);
    });
}));

该指令似乎有一个用于单击事件的主机侦听器 - 我如何触发它以使 ul 可用？

显示问题的简化 plunkr： https://plnkr.co/edit/mHTHLEumQ04tInFVAz3z ?p=preview

如果调整右视口的大小直到两个容器不再适合同一行，则右视口将移动到新行。

然而，父级 inline-flex 容器的宽度不会改变，顶部的“header”元素会被抛出——“header”中的“button”应该与下面容器中的最后一个项目右对齐。

两个（或多个）项目具有固定宽度，但它们之间没有空间。这些是唯一具有固定宽度或高度的元素。

当项目换行到新行时，如何强制 Flex 容器宽度适应/收缩（不使用 js，纯 HTML/CSS）？

.main-flex {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.flex-container {
  flex-grow: 1;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
}

<div style="margin-top: 100px;" class="main-flex">
  <div>
    <span>header</span>
    <span style="float:right">button</span>
  </div>
  <div class="flex-container">
    <div style="height: 400px; width:250px; border: 1px solid black;"></div>
    <div style="height: 400px; width:250px; border: 1px solid black;"></div>
  </div>
</div>