小编Ham*_*pus的帖子

我正在尝试在Angular2中构建一个列表组件,它获取组件用户的项目字段的项目,列和模板.所以我试图使用ngTemplateOutlet和ngOutletContext(我读过的是实验性的).但我无法让它发挥作用.

这是一个简化的组件,用于演示我要做的事情:

<div *ngFor="let item of items>
  <span *ngFor="let column of columns>
    <template [ngOutletContext]="{ item: item }" 
              [ngTemplateOutlet]="column.templateRef"></template>
  </span>
</div>

以下是组件的用法:

<my-component [items]="cars" [columns]="carColumns">
  <template #model>{{item.model}}</template>
  <template #color>{{item.color}}</template>
  <template #gearbox>{{item.gearbox}}</template>
</my-component>

以下是示例数据:

cars = [
  { model: "volvo", color: "blue", gearbox: "manual" },
  { model: "volvo", color: "yellow", gearbox: "manual" },
  { model: "ford", color: "blue", gearbox: "automatic" },
  { model: "mercedes", color: "silver", gearbox: "automatic" }
];

carColumns = [
  { templateRef: "model" },
  { …

如何从angular2运行时检测到我在e2e测试模式下运行？我有一个会话刷新间隔,我不想在测试模式下设置,以避免与量角器同步问题.

一个明显的答案是寻找一个URL参数.有没有那么脏的解决方案？

EDIT(赏金前的澄清):量角器连接到角度(1或2),以便在评估任何东西之前等待所有未完成的工作完成.这意味着所有突出的角度promises或任何有效的角度timer都将悬挂量角器测试(最终导致它们失败).最常提出的解决方案是设置,browser.ignoreSynchronization = true但这将迫使我在回调链中嵌套所有e2e测试或使用一堆睡眠.可能两者都有.因此,我似乎陷入了摇滚和困难的地方之间,要么在编写e2e测试时遇到真正的艰难经历,要么在特定的应用程序代码行中设置条件,以便在"测试模式"(eww,丑陋)时不运行.我选择更简单的e2e测试,因为我希望将它们写成数百个,到目前为止我们只讨论一个在测试期间不重要的间隔(会话刷新的间隔为30分钟).

我刚开始一个新项目.我正在构建一个"具有本机感觉"的Web应用程序,它将在全屏浏览器中的远程控制设备上运行(没有地址栏,固定分辨率).UI基本上由多个全屏视图组成.AngularJS目前是首选武器,原因多种多样.我一直在尝试'ui-router'及其'状态'来构建不同的视图.例如:

/#/desktop
/#/menu
/#/videoStore/posterView
/#/videoStore/listView

我非常喜欢每个视图都有一个模板,一个控制器和一个URL.切换视图时页面不重新加载的事实是至关重要的.但是,有一些我缺乏的东西.

双缓冲

我希望能够在转换到它之前准备下一个状态/视图.ui-router提供了一系列无法做到的事件.onEnter,$stateChangeStart并$stateChangeSuccess全部调用之前state/view controller甚至构成.我宁愿这些事件,其中被称为上转变前的控制器.例如onStart,它首次启动时和onResume恢复时.

历史行为

每次进入状态时似乎都会重建状态,这意味着模板会再次添加到DOM中并实例化一个新的控制器.这是不必要的,应该会破坏性能.离开videoStore时无需重新构建菜单.事实上,我希望能够完全相同,专注于子文件夹中的相同项目,而不必重新创建它.

Keyhandling

我还没弄明白如何确保键进入正确的状态/视图或子视图.我正在考虑向正文添加一个监听器,然后将密钥发送到当前作用域.虽然我不认为这样做会因为在一个州内有多个观点时哪个范围是"活跃的"的不确定性.onFocus状态/视图控制器上的某种事件会很棒.此外,除非遍历$$(私有)字段,否则似乎无法从angular获取"活动"范围.

好的.谢谢阅读.

这是我的问题:

• 他们的某种方式是"凑合" ui-router吗？我只评估了两天,可能错过了很多.
• Angularjs有替代品ui-router吗？
• 是否还有其他任何Javascript框架可以完成这些与我描述的类似的东西？

假设我有以下源结构.

/home
  home.component.ts
/shared
  /domain
    car.domain.ts
    house.domain.ts
    person.domain.ts
    index.ts

所有域文件都包含类似的内容

export interface Car {
  someProperty: number;
}

索引文件如下所示

export * from './car.domain';
export * from './house.domain';
export * from './person.domain';

然后在我的家庭组件中完美地导入这样的导入.

import { Car, Person } from '../shared/domain';

要么

import { Car, Person } from '../shared/domain/index';

但是,当自动导入WebStorm坚持导入这样的接口时

import { Car } from '../shared/domain/car.domain';
import { Person } from '../shared/domain/person.domain';

有没有办法让WebStorm更喜欢从索引文件导入？

我正在创建一个可滑动到下一个或上一个全屏页面的分页组件。由于不同的浏览器和设备存在问题，因此我暂时不再使用CSS过渡。我有一个有效的角度动画解决方案，但是新问题是它无法缩放。

import { Component } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('slideTransition', [
      state('firstPage', style({ transform: 'translateX(0)' })),
      state('secondPage', style({ transform: 'translateX(-100%)' })),
      transition('firstPage=>secondPage', animate('0.6s ease')),
      transition('secondPage=>firstPage', animate('0.6s ease'))
  ])]
})
export class AppComponent {

  state = 'firstPage';

  nextPage() {
    this.state = 'secondPage';
  }

  previousPage() {
    this.state = 'firstShowing';
  }

}

如您所见，问题是当我有9页时。我不想定义9个状态和18个转换。如何根据页面数执行可重用状态或生成状态并转换运行时？有任何想法吗？

模板看起来像这样

<div class="container">
  <div [@slideTransition]="state" class="page">
    <h1>Page 1</h1>
    <div class="clicker" (click)="nextPage()">clickity</div>
  </div>
  <div …

我有一个翻译的flex项目仍然占据其原始空间的问题,以便下面的flex项目不会立即跟随.有关更多详细信息,请参阅JSFiddle或代码段.我希望绿色矩形紧跟在红色之后,以便在边框内可见.遗憾的是,我不能翻译父级,它会溢出:隐藏,以便只有边框内的子项可见.

这是一个JSFiddle https://jsfiddle.net/3wv9d9dm/

或者一个片段:

.parent {
  display: flex;
  width: 100px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
}

.child {
  flex: 0 0 100%;
}

<div class="parent">
  <div class="child" style="background-color:red;transform:translateX(-100%);"><h1>1</h1></div>
  <div class="child" style="background-color:green;"><h1>2</h1></div>
  <div class="child" style="background-color:blue;"><h1>3</h1></div>
</div>