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

发布时间：2020-12-17 07:48:41 所属栏目：安全来源：网络整理

导读：我在第一页有一个textarea,当我转到下一页时,我需要将此值显示在下一页中共享的记事本组件中,但同时我需要在首先在共享组件中写入新信息时并且可以保存和显示新信息.我需要使用angular2,我不能使用github.enter图像描述中的任何东西由于它不是父子关系,您可

我在第一页有一个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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!