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

问题描述：

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

如何关联的冷杉和第二部分。这是一些父母组件的孩子吗？ – onetwo12

第一个组件是该页面中表单的一部分，该表单是一个组件但不共享，它们不是其他页面的子组件。我的主要问题是从记事本中获取信息并传递到下一页。 –

尝试定义属性'someProp'，然后使用'[（ngModel）] =“someProp”'将它们分配给它们两个。你可以像这样添加它[' – onetwo12

答

因为它不是父子关系，你可以使用共享服务，并通过使用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

它的工作！谢谢:) –

如果它解决了你的问题，请把它标记为'Accepted':) – Nehal

答

您可以使用@Input装饰，如果有部件之间的父子关系。否则使用Services或BehaviourSubject。这些是基于优先级的以下方法：

使用服务（最推荐）。
使用来自RxJS库的行为主题。
使用Redux进行状态管理。
使用浏览器存储（会话/本地），但最不推荐作为倾向来保证数据安全。

有任何机会使用服务创建一个笨蛋示例？ –

你可以自己创建一个服务并在setter函数中设置变量。其他使用相同服务的组件可以使用getter函数获取变量的值。 –

答

在ReactiveFormsModules中使用cookie，只有在有有效数据时才保存到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() 
    } 
}

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

相关推荐