小编Nat*_*May的帖子

我正在制作一个拖放应用程序,我创建了一个可观察鼠标位置,重新定位我的drag-object.

mouseMove$: any;

constructor(){
  this.mouseMove$ = Observable.fromEvent(document, 'mousemove')
    .do((mouseevent: MouseEvent) => {
      if (document.getElementById("drag-object")){
        document.getElementById("drag-object").style.left = (mouseevent.clientX) + 'px';
        document.getElementById("drag-object").style.top = (mouseevent.clientY) + 'px';
      }
  });

通过这种实现,我可以通过这种方式订阅:

this.mouseMove$.subscribe();

但我似乎无法取消订阅:

this.mouseMove$.unsubscribe();

要么

this.mouseMove$.dispose();

在任何一种情况下,我都会收到以下类型的错误:

TypeError:this.mouseMove $ .unsubscribe不是函数...

我不知道这是否与该做mouseMove$的类型any,但设置的类型,Observable并Observable<MouseEvent>没有工作.我在这里不理解什么？

我正试图在Angular2指令中听我的鼠标的X位置,如下所示:

@HostListener('mousemove', ['$event'])
onMousemove(event: Event): void  { 
  console.log(event.clientX)
}

但我得到了错误

属性'clientX'在'Event'类型中不存在.

这很奇怪,因为这个听众

@HostListener('mousemove', ['$event'])
onMousemove(event: Event): void  { 
  console.log(event)
}

注销一个事件对象

为什么我无法访问event.clientX？

我正在构建一个可以显示不同类型数据的日历.以下示例解释了我的URL结构:

• todo/2017/01/01 托多斯的日视图
• birthdays/2017/01/01 生日的日视图
• todo/2017/01 一个月的待办事项
• birthdays/2017/01 一个月的生日视图
• todo/2017 一年的待办事项
• birthdays/2017 一年生日的看法

到目前为止,我已经能够传入一个Date对象并重新路由

this.router.navigate([#HARDCODED# 'todo' #OR# 'birthday', year, ?month, ?day])

问题是我希望能够从todo/2017/01/01=> birthdays/2017/01/01OR todo/2017/01=> 导航birthdays/2017/01.

所以我无法传递日期参数,因为根据我所处的视图,某些可能不存在.

那么我怎样才能只切出一个内部参数并重新路由呢？

就像是

this.router.navigate(['todo', {ignoreTheRest: true}])

否则,我必须为每个可能的组合编写一个复杂的switch语句.

我的计划是将表单的值存储在我的ngrx商店中,以允许我的用户浏览网站并返回表单(如果他们愿意).我们的想法是,表单的值将使用可观察对象从商店重新填充.

这是我目前正在做的事情:

constructor(private store: Store<AppState>, private fb: FormBuilder) {
    this.images = images;
    this.recipe$ = store.select(recipeBuilderSelector);
    this.recipe$.subscribe(recipe => this.recipe = recipe); // console.log() => undefined
    this.recipeForm = fb.group({
      foodName: [this.recipe.name], // also tried with an OR: ( this.recipe.name || '')
      description: [this.recipe.description]
    })
  }

商店给出了一个初始值,我已经看到它正确地通过我的选择器函数,但是当我的表单被创建时,我不认为该值已经返回.因此this.recipe仍未定义.

这是错误的方法,还是我能以某种方式确保在创建表单之前返回observable？

我的角度应用程序中有一个e2e量角器测试.我只是连续几次运行完全相同的测试,并且它通过了大约5%的时间,在下面的屏幕截图中没有错误.

考试:

it('should open the cart with the cart button in the header', () => {
    page.navigateTo('/calendar/day/(dmy:27-9-2018)');

    page.cartButton().click();

    expect(element(by.css('h2.cart-header')).isPresent()).toBe(true);
});

量角器暂停启动的chrome实例显示单击按钮并且存在h2元素(请参见底部的图像).

我试过了什么

1. 我已使用模拟数据替换此组件中的数据以消除异步操作
2. 我禁用了动画
3. 我试图使这个异步功能: ... header', async () => { ...
4. 我试过等待元素: expect(await element(by.css('h2.cart...
5. 我试过了 browser.sleep(1000)
6. 我已经尝试了各种类似的断言.toBe(true),.toEqual(true)以及.toBeTruthy()

导致此错误的原因是什么,我该如何解决？

错误消息:

元素存在于量角器启动的浏览器中

我正在我的 angular2 应用程序中实现一个拖放功能，它的工作原理是这样的......用户会看到他们可以选择的选项列表和列表上方的拖放区 - 当他们从一个选项拖到drop zone 然后处理事件。

到目前为止，我有一个可拖动指令来处理拖动开始事件并在该事件的 dataTransfer 属性上设置一些数据。我试图做的是创建另一个指令，它是一个 dropTarget 指令，它只处理 drop 事件并获取数据。

这是可以做的事情吗？对于可拖动的 div 和放置区使用相同的指令，并插入一些逻辑，以便仅在将 div 放置在正确的目标上时才允许放置事件发生，我会不会更好。

谢谢

编辑：代码

这是我的可拖动指令的代码：

import {Directive, ElementRef} from '@angular/core';

@Directive({
    selector: '[myDraggable]',
    host: {
        '(dragstart)': 'onDragStart($event)',
        '(dragover)': 'onDragOver($event)',
        '(dragleave)': 'onDragLeave($event)',
        '(dragenter)': 'onDragEnter($event)',
        '(drop)': 'onDrop($event)'
    }
})
export class DraggableDirective {

    constructor(el: ElementRef) {
        el.nativeElement.setAttribute('draggable', 'true');
    }

    onDragStart(ev: DragEvent) {
        console.log("Drag Started");
        ev.dataTransfer.setData('Text', 'Data from drag start');
    }

}

这是拖动目标指令代码：

import {Directive, ElementRef} from '@angular/core';

@Directive({
    selector: '[dragTarget]',
    host: {
        '(dragover)': 'onDragOver($event)'
    } …

我找到了这个答案，该答案显示了如何将表单控件添加到父表单：

重复使用angular2模型驱动形式的组件

但我希望能够像这样将新的formGroups添加到页面的不同区域。

<form [formGroup]="myForm">
  <!--... other inputs -->
  <md-tab-group formGroupName="nutrition">
    <md-tab formGroupName="calories">
      <template md-stretch-tabs="always" md-tab-label>Calories</template>
      <template md-tab-content>
        <calories></calories> <!-- I want to add controll groups like this-->
      </template>
    </md-tab>
    <md-tab formGroupName="carbs">
      <template md-stretch-tabs="always" md-tab-label>Carbs</template>
      <template md-tab-content>
        <carbs></carbs>
      </template>
    </md-tab>
  </md-tab-group>
</form>

整个表单模型应如下所示：

{
   name: '',
   nutrition:{
      calories: {
        total: ''
        // more
      },
      carbs: {
        total: ''
        // more
      }
}

我已经能够nutrition像这样添加formGroup：

<nutrition [parentForm]="myForm"></nutrition>

import { Component, OnInit, Input } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, …

我正在构建一个具有复杂用户界面的应用程序.事实上,如此复杂,我不认为我可以使用ionic来简单地创建同一个应用程序的移动友好版本.例如,媒体查询可以改变我的CSS,但我需要一个全新的结构,因此需要一个新的应用程序.

理想情况下,我希望有一个标准的Angular2应用程序用于桌面和Ionic app for mobile.我更喜欢将它们放在同一个项目文件夹中,以便我可以在它们之间共享一些代码.我甚至不确定这是否可行.

有没有办法可以检测设备是否可移动并呈现不同的应用程序/应用程序根目录？

该组件使用材料图标。

现在我正在尝试使用 karma（通过 angular cli/webpack）学习单元测试，并且我已经弄清楚了大部分配置来创建组件，但我正在努力理解如何配置材质图标。

这是我迄今为止创建的内容：

/* config */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
import { TickerDirective } from '../../directives/ticker.directive';
import { MdIconModule, MaterialModule } from '@angular/material';
import { MdIconRegistry } from '@angular/material/icon';

/* my stuff */
import { FoodListComponent } from './food-list.component';
import { FoodDataService } from '../../services/food-items/food-data.service';
import { FoodItem } from '../../diet/food-item';
import { WorkingData } from '../../services/working-data/working-data';
import { WorkingDataService …

更新很顺利,但现在当我构建时,我收到以下错误.

错误:预计在/ Users/nathanielmay/Code/firebaseTest文件夹中找到ngsw-config.json配置文件.在angular.json配置文件中提供一个或禁用Service Worker.

我看着我angular.json,发现在这一行:

"ngswConfigPath": "/src/ngsw-config.json",

不允许使用属性ngswConfigPath.

我找不到新的angular.json的api,但似乎我需要以不同的方式指定路径.

ng update @angular/pwa 也没用.

我该如何解决这个错误？