Angular 2: Senden Sie eine Formulardaten und akzeptiert den Wert zu einer anderen Komponente/Seite

Question

Ich habe eine Anforderung, ein kleines Formular in der Homepage, die Vorname und Nachname bestehen und wenn der Benutzer das Formular übermittelt, wird es zu navigieren andere Seite mit einem anderen Formular (mit mehr Feldern). Die aus dem ersten Formular eingegebenen Werte sollten in das zweite Formular eingegeben werden.

Ich freue mich auf Shared-Service und die Verwendung der @ Eingabe.

Bitte lassen Sie mich einen Rat und einen Beispielansatz wissen, wie ich meine Anforderungen erfüllen kann. Vielen Dank!

Answer 1

Sie können $ stateParams verwenden, um die Daten an eine andere Seite zu übergeben.

Siehe: https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service

Answer 2

Es gibt ein paar Ansätze sind je nachdem, ob Sie den Router verwenden oder nicht.

1. Sie können Werte von queryParams wie dies in Ihrem Tag übergeben:

<a [routerLink]="['pathToNewFormPlaceholder']" [queryParams]="{'firstName': 'John', 'lastName': 'Doe'}">Submit</a>

wo 'John' und 'Doe' sind nur Platzhalter für Ihre [(ngModel)] Werte aus der Form und dann, um sie in der neuen Komponente abonnieren:

export class NewFormComponent implements OnDestroy{ 
    params: {}; 
    subscription: Subscription; 

    constructor(private router: Router) { 
    this.subscription = router.routerState.queryParams.subscribe(
    (queryParams: any) => this.params = queryParams); 
    } 

    ngOnDestroy() { 
    this.subscription.unsubscribe(); 
    } 
} 

2. as ervice FormService mit Variablen speichern Ihre Daten und Methoden:

   previousForm: any; 
   
   saveValues(data) { 
       this.previousForm = data; 
   } 
   
   getFormValues() { 
       return this.previousForm; 
   } 
   

und fügen Sie sie der Anbieter in der Bootstrap-Datei wie folgt:

bootstrap(AppComponent, [ 
     FormService 
    ]); 

dann in beiden Formularkomponenten geben Sie Ihre FormService in der Konstruktor: constructor(private formService: FormService);

Nach dem Sie this.formService.saveValues({firstName, lastName}) aufrufen sollten, wenn Sie die erste Form.

Um die Werte in der neuen Formularkomponente abzurufen, rufen Sie Ihren Dienst auf und weisen Sie den gewünschten Feldern Werte zu.

ngOnInit() { 
    let data = this.formService.getFormValues() 
    this.firstName = data.firstName; 
    this.lastName = data.lastName; 

}