Angular 2 - 将textarea值发送到共享组件

Question

我在第一页有一个textarea，当我转到下一页时，我需要这个值显示在下一页共享的记事本组件中，但同时我需要在我写下新信息时共享组件首先和新信息可以保存和显示。我需要使用angular2，我不能使用来自github.enter图像描述的任何东西

Answer 1

由于它不是父子关系，您可以使用共享服务并使用textarea和setter传递getter值。

示例：

form.component.ts：

@Component({
  selector: 'form1-component',
  template: `
    <h3>Form 1</h3>
        <textarea [(ngModel)]="input"></textarea>
        <button (click)="save(input)">Save</button>
  `,
})
export class Form1 {
  input: any;

  constructor(private appState: AppState){

  }

  save(val){
    this.appState.setData(val);
  }
}

shared.service.ts：

@Injectable()
export class AppState {
  public formData;

  setData(value){
    this.formData = value;
  }

  getData(){
    return this.formData;
  }
}

other.component.ts：

@Component({
  selector: 'summary',
  template: `
    <h3>Summary From Form 1</h3>
    <div>{{data}}</div>
  `,
})
export class Summary {
  data: any;

  constructor(private appState: AppState){
    this.data = this.appState.getData();
  }
}

Plunker demo

Answer 2

如果组件之间存在父子关系，则可以使用@Input装饰器。否则，请使用Services或BehaviourSubject。以下是基于优先级的方法：

1. 使用服务（最推荐）。
2. 使用RxJS库中的行为主题。
3. 使用Redux进行状态管理。
4. 使用浏览器存储（会话/本地），但最不推荐使用浏览器存储 数据安全。

Answer 3

将Cookie与ReactiveFormsModules一起使用，仅在拥有有效数据时保存到Cookie。

npm install cookies-js --save

APP-module.ts

...
imports: [ReactiveFormsModule]
...

MyComponent.html

...
<form [formGroup]="form">
  <input name="a" formControlName="b">
</form>
...

MyComponent.ts

import {Component, OnInit} from '@angular/core';
import {FormGroup,FormBuilder,Validators} from '@angular/forms';
import * as Cookies from 'cookies-js';

export class MyComponent implements OnInit{

  private static readonly COOKIE_DATA = 'data_to_save';

  form : FormGroup;

  constructor(private fb: FormBuilder) {

     this.form.fb.group({
     b: ['' Validators.required] 
     });
  }
  ngOnInit() {
    const data = Cookies.get(MyComponent.COOKIE_DATA);
    if (data) {
      this.form.setValue(JSON.parse(data));
    }
    this.form.valueChanges
     .filter(() => this.form.valid)
     .do(validData => Cookies.set(COOKIE_DATA, JSON.stringify(validData)
     .subscribe()
  }
}