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

前端之家收集整理的这篇文章主要介绍了Angular 2 – 将textarea值发送到共享组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在第一页有一个textarea,当我转到下一页时,我需要将此值显示下一页中共享的记事本组件中,但同时我需要在首先在共享组件中写入新信息时并且可以保存和显示新信息.我需要使用angular2,我不能使用github.enter图像描述中的任何东西


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

例:

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

猜你在找的Angularjs相关文章