Angular 2-将textarea值发送到共享组件 [英] Angular 2 - send textarea value to a shared component

问题描述

我在第一页中有一个文本区域，当我转到下一页时，我需要此值显示在下一页中共享的记事本组件中，但与此同时，当我在首先共享组件，然后可以保存和显示新信息.我需要使用angular2，我不能使用github.enter图像描述中的任何内容

I have a textarea in the first page and when i go to next page i need this value to show in a notepad component that is shared in the next pages but at the same time i need that when i write new info in the shared component first and new information can be saved and displayed. i need to use angular2 and i cant use any stuff from github.enter image description here

推荐答案

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

Since its not a parent-child relation, you can use shared service and pass the textarea value using setter and getter.

示例:

form.component.ts:

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:

shared.service.ts:

@Injectable()
export class AppState {
  public formData;

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

  getData(){
    return this.formData;
  }
}

other.component.ts:

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();
  }
}

柱塞演示

这篇关于Angular 2-将textarea值发送到共享组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！