小编sti*_*rts的帖子

Angular2:如何使用带有NgModel双向绑定的JavaScript Date Object

我正在使用Angular 2,我有这个代码:

JS,此代码启动模板的employee-variable:

handleEmployee(employee : Employee){
        this.employee = employee;
        this.employee.startDate = new Date('2005/01/01');
        console.log(this.employee);
    }
Run Code Online (Sandbox Code Playgroud)

模板:

...
<div>
    <label>Start date: </label>
    <input [(ngModel)]="employee.startDate" type="date" name="startDate"/>
  </div>
  <div>
...
Run Code Online (Sandbox Code Playgroud)

其他数据如firstname正确显示.但是到了我得到的日期:

mm/dd/yyyy
Run Code Online (Sandbox Code Playgroud)

在input元素中,应该是一个日期.

我怎样才能做到这一点?

javascript angular

53
推荐指数
3
解决办法
8万
查看次数

从queryParams angular 2中删除参数

我使用查询参数导航到我的应用中的某个页面.从URL中获取参数后我想删除它,理想情况下我会这样:

let userToken: string;
    this.sub = this.router
      .routerState
      .queryParams
      .subscribe(params => {
        userToken = params['token'];
        params['token'].remove();
      });
Run Code Online (Sandbox Code Playgroud)

但显然删除功能不存在.有人有替代方案吗?

angular

19
推荐指数
3
解决办法
3万
查看次数

模拟router.events.subscribe()Angular2

在我的app.component.ts中,我有以下ngOnInit函数:

ngOnInit() {
    this.sub = this.router.events.subscribe(e => {
      if (e instanceof NavigationEnd) {
        if (!e.url.includes('login')) {
          this.loggedIn = true;
        } else {
          this.loggedIn = false;
        }
      }
    });
  }
Run Code Online (Sandbox Code Playgroud)

目前我正在测试sub是否为null但我想测试100%覆盖率的函数.

我想模拟路由器对象,以便我可以模拟URL,然后测试是否正确设置了this.loggedIn.

我将如何进行模拟此功能?我尝试了但是我不知道如何通过涉及的回调和NavigationEnd来实现这一点.

unit-testing mocking jasmine angular

19
推荐指数
5
解决办法
2万
查看次数

等待ngOnInit在Jasmine Angular2中完成

我正在对一个组件进行单元测试,这就是我所拥有的:

describe('Component: nav', () => {

  beforeEach(() => addProviders([
    provide(UserService, {useClass: MockUserService}),
    NavComponent
  ]));

  it('should have a property \'firstName\' with the value \'Crazypug\'',
    async(inject([NavComponent], (component) => {
      component.ngOnInit();
      expect(component.firstName).toEqual('Crazypug')
    }))
  );

});
Run Code Online (Sandbox Code Playgroud)

这是ngOnInit函数:

ngOnInit() {
    this.userService.getFirstNameCall().subscribe(
      data => {this.firstName = data.firstname; });
}
Run Code Online (Sandbox Code Playgroud)

当我运行测试时,我得到:

预期未定义为等于'Crazypug'

我怎样才能让Jasmine等待ngOnInit函数完成?我从很久以前就在SO上找到了一些解决方案(以角度2的方式).他们非常复杂或过时.

jasmine karma-jasmine angular

17
推荐指数
1
解决办法
7933
查看次数

如何对Angular2中调用window.location.href的函数进行单元测试

我有这个功能我需要测试:

login(): void {
    this.userService.setSessionAndDateOnlogin();
    this.loginService.getLogin()
      .subscribe(
        octopusUrl => window.location.href = octopusUrl);
  }
Run Code Online (Sandbox Code Playgroud)

我使用window.location.href导航到外部URL.

这是我的测试:

it('login function should call the setSessionAndDateOnLogin function from the userservice and\
   subscribe to the  getLogin function of the loginService.',
    fakeAsync(
      inject(
        [LoginComponent, LoginService, UserService],
        (loginComponent: LoginComponent, loginService: LoginService, userService: UserService) => {
          spyOn(userService, 'setSessionAndDateOnlogin');
          loginComponent.login();
          expect(userService.setSessionAndDateOnlogin).toHaveBeenCalled();
        })
    )
  );
Run Code Online (Sandbox Code Playgroud)

当我运行此测试时,我收到以下错误:

你的一些测试做了整页重装!

所以我试着模仿窗口对象:

import { window } from '@angular/platform-browser/src/facade/browser';
...
class MockWindow {
  location: {
    href: ''
  };
}
...
beforeEach(() => addProviders([
    ...
    { provide: …
Run Code Online (Sandbox Code Playgroud)

unit-testing window.location jasmine angular

7
推荐指数
1
解决办法
4475
查看次数

仅为一个React组件加载外部CSS文件

我想将外部 CSS 应用于带有链接标签的 React 组件。但是,当我将该组件包含在另一个项目中时,CSS 也会应用到父项目上,这是正常的。

我怎样才能避免这种情况?我希望将“父 css”应用到组件上,但由于该组件是延迟加载的,因此 css 不会对其执行操作。

css reactjs

5
推荐指数
1
解决办法
7153
查看次数