Базовая настройка службы Angular 2 Typescript

Question 1

Я начинаю преобразовывать проект Angular 1 в Angular 2, и у меня возникли проблемы с настройкой моей первой службы. Я создал plunkr, который соответствует тому, что я пытаюсь сделать, и он полностью проваливается. Вот плункер:

https://plnkr.co/edit/oYrg68HhTihPFAcSGU8t?p=preview

В реальном приложении я использую генератор углового интерфейса командной строки и получаю следующую ошибку:

Ошибка: Typescript обнаружил следующие ошибки:
/path/to/project/tmp/broccoli_type_script_compiler-input_base_path-bvDJA9MD.tmp/0/src/app/+login/login.component.spec.ts (17, 21): предоставленные параметры не соответствуют ни одной сигнатуре вызова цель.

Если бы кто-нибудь мог помочь мне заставить Plunkr работать, было бы здорово!

Вот спецификационный файл, если он полезен:

/* tslint:disable:no-unused-variable */

import { By }           from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

import {
  beforeEach, beforeEachProviders,
  describe, xdescribe,
  expect, it, xit,
  async, inject
} from '@angular/core/testing';

import { LoginComponent } from './login.component';

describe('Component: Login', () => {
  it('should create an instance', () => {
    let component = new LoginComponent();
    expect(component).toBeTruthy();
  });
});

typescript angular

0

curiousgage 24 Июн 2016 в 19:39

Кажется, конструктору LoginComponent нужны аргументы?

–

Maximilian Riegler

24 Июн 2016 в 19:54

Answer

Вот измененная версия вашего plunkr, которая у меня работает.

Похоже, вам нужно предоставить TestService, а затем передать его в конструктор в качестве параметра.

Обновлен app.ts.

//our root app component
import {Component} from '@angular/core';
import {TestService} from './test.service';

@Component({
  selector: 'my-app',
  providers: [ TestService  ],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <p><a (click)="logIn('test-user', '123456')">Test Login</a></p>
      <p>{{status}}</p>
    </div>
  `,
  directives: []
})
export class App {

  constructor(
    private testService:TestService;) {
    this.name = 'Pizza';
    this.status = 'Sword';

  }

  logIn(username, password) { 
    this.status = this.testService.logIn(username, password);
  }
}

0

Aarmora 24 Июн 2016 в 19:57

Отлично, что исправил plunkr! Не был уверен, нужно ли мне предоставлять услугу в декораторе @Component, поэтому урок усвоен там. И спасибо, что обнаружили проблему синтаксиса с конструктором. Как оказалось, это не исправило мое фактическое приложение, но сузило его достаточно для того, чтобы я понял, что проблема была в чем-то в спецификации теста. Я пока закомментировал файл спецификации, и теперь я снова готов к работе.

–

curiousgage

24 Июн 2016 в 22:36

Рад это слышать! Удачи!

–

Aarmora

24 Июн 2016 в 23:37

Question 2