サービス

Tweet

次のコマンドでサービスを生成する。

ng generate service サービス名

サービスを次のように書き換える。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor() { }
  hello(name:string) {
    return "hello " + name + "!!";
  }
}

コンポーネントのコンストラクタで呼び出す。

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.css'],
})
export class AuthComponent implements OnInit {
  myControl:FormGroup;
  message:string;

  constructor(private service:AuthService) { }

  ngOnInit(): void {
    this.message = this.service.hello("Taro");
    this.myControl = new FormGroup(
      {
        name: new FormControl(''),
        password: new FormControl('')
      }
    );
  }

  click() {
    let msg = JSON.stringify(this.myControl.value);
    console.log(msg);
  }
}