Você misturou alguns conceitos. Vamos revê-los. Por exemplo, document.write não é usado em aplicações, apenas quando estamos começando a programar. É uma saída fácil para exibir algo na tela. Se você usa document esta "matando" o Angular que justamente quer evitar de você manipular o document.
Você definiu um método que define dentro uma função. Aqui a função dentro do método não é usada e nada é retornado. Se você quer o cálculo de quadrado, seu próprio método da classe deve retornar o valor. Veja como está:
export class CalService {
// isso e um método que declara uma função perdida dentro dele e que usa document.write
getCal(){
function quadrado(num){
return num * num;
}
document.write(quadrado(6)+'<br>');
}
Agora, modificando seu código, olha como ele deveria ser (eu digo deveria, porque pode ser feito de várias formas):
// call.service.ts
import { Component } from '@angular/core';
import {Injectable} from '@angular/core';
export class CallService {
// método do serviço que recebe um número e o retorna multiplicando-o por ele mesmo.
calculaQuadrado(num: number) {
return num * num;
}
}
// teste.component.ts
import { Component, OnInit } from '@angular/core';
import { CallService } from './cal.service';
@Component({
selector: 'teste',
templateUrl: './teste.component.html',
styleUrls: ['./teste.component.css']
})
export class TesteComponent {
private _callService: CallService;
// injeção do serviço
constructor(private _calService: CallService) {}
// o métdo getCalc é o método do componente que pode ser chamado em seu template. Este método chama o método calculaQuarado e retorna seu resultado. Não podemos acessar o serviço diretamente na view porque ele não é um componente, por isso ele é acessado por intermédio de `TesteComponent`.:
getCalc(num) {
return this._callService.calculaQuadrado(num);
}
}
Outro ponto, na sua view você esta usando a diretiva *nFor, ela só faz sentido para percorrer arrays. Array é uma estrutura de dados que pode ter 0 ou mais itens. Em nenum lugar do seu código você possui um array. É isso que me deixou um pouquinho confuso do que você realmente quer. Sendo assim, para funcionar e com o código que escrevi basta fazer:
{{ getCalc(200) }} // exibirá o retorno do serviço.
Veja que você esta chamando diretamente o método getCalc do componente. E este método chama o método do serviço.
Eu vejo no fórum sua vontade em dominar o Angular, aliás, poucas vezes vi alguém tão persistente em aprender determinada tecnologia. Isso é uma qualidade importante em qualquer pessoa que queria se tornar um mestre em determinada tecnologia.
Mas se você me permitir (aguardo sua confirmação) posso indicar uma sequencia de cursos para prepará-lo ainda melhor para o o Angular 2. Topa? Você gastará um tempo maior estudo, mas terá uma base mais firme para consolidar o Angular 2 que na verdade é uma amalgama de várias tecnologias e conceitos de JavaScript.
Aguardo seu retorno
