反應形式：在角度服務中注入表單值4

Question

我想在服務中使用兩個表單值。
但我沒有得到方法/語法來注入服務中的值，以便在其他組件中注入它們。
這裏是我的形式代碼：

form.component.ts

import { Component, OnInit } from '@angular/core'; 
import {FormBuilder, FormGroup} from '@angular/forms'; 

@Component({ 
    selector: 'app-formurl', 
    templateUrl: './formurl.component.html', 
    styleUrls: ['./formurl.component.css'] 
}) 
export class FormurlComponent { 

    rForm: FormGroup; 
    post: any;   // property: weitergeben an Service 
    url: string = ''; 
    name: string = ''; 


    constructor(private fb: FormBuilder) { 

    this.rForm = fb.group({ 
     'name': [''], 
     'url': [''] 
    }); 

    } 


    addPost(post) { 

    this.name = post.name; 
    this.url = post.url; 

    } 

} 

form.component.html

<form [formGroup]='rForm' (ngSubmit)="addPost(rForm.value)"> 

    <label> 
    <input type="text" formControlName="name"> 
    </label> 

    <label> 
     <input type="text" formControlName="url"> 
    </label> 

    <input type="submit" class="button expanded" value="Submit Form"> 

</form> 

，我想注入此服務中的值「名稱」和「網址」：

個service.ts

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

@Injectable() 
export class AddwmslayerService { 


    addlayer = { 

    addlayername: ??????????????? , 
    addlayerurl: ??????????????????, 

    }; 

    constructor() { } 

} 

非常感謝您爲每一個建議潛在的解決方案。
我真的很感激！

Answer 1

您可以在服務中創建一個set方法，然後在表單提交後調用它。但是你必須在app.module.ts中提供服務。

service.ts

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

@Injectable() 
export class AddwmslayerService { 


    addlayer = { 

    addlayername: '', 
    addlayerurl: '', 

    }; 

    constructor() { } 

    setLayer(name: string, url: string) { 
    this.addlayer.addlayername = name; 
    this.addlayer.addlayerurl = url; 
    } 

} 

form.component.ts

... 
constructor(private fb: FormBuilder, private addLayerService: AddwmslayerService) { 

    this.rForm = fb.group({ 
     'name': [''], 
     'url': [''] 
    }); 

} 


addPost(post) { 

    this.name = post.name; 
    this.url = post.url; 

    this.addLayerService.setLayer(this.name, this.url); 
} 
...