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

问题描述

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

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传递textarea值代码> 和 getter.

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

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

Plunker 演示

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