javascript - parent 与子女操纵之间的共同值(value)

我有两个组成部分：父母，孩子。

这是场景：


子级从父级获取价值，并不断变化
子项始终会更新更改后的值
子级操作值并显示它
在父端，该值不会因为在子端被操纵而被更改


一个用例示例：


我已经尝试过@Input。因为@Input值在子级上受到操纵，所以在父级上它也会更改。这是我要防止的，但仍然想保持从父级获取更新的值。

@Input的示例代码：

@Component({
    selector: 'c-parent',
    template: `
           <div>{{question.name}}</div>
           <button type="button" label="xxx" (click)="changeTheValue()"></button>
           <br/>
           <c-child [tmpQuestion]="question"></c-child>`
})

export class Parent implements OnInit {

    question: Question; // don't get changed from the Child side

    ngOnInit() {
        question.name = "1";
    }
    changeTheValue(){
        question.name = "2";
    }
}

@Component({
    selector: 'c-child',
    template: `<div>{{tmpQuestion.name}}</div>`
})

export class Child implements OnInit {

    @Input() tmpQuestion: Question; // be updated for the changes

    ngOnInit() {
        tmpQuestion.name = "This is the question: " + question.name; //manipulate the value
    }
}

如何使用@Input方法执行此操作，或者需要使用其他方法？

最佳答案

Plunker

使用this

在函数内部的变量中添加了this，因此question.name变为this.question.name。

基元

如果您希望子组件检测到更改，则Primatives（字符串，数字，布尔值，符号）更易于使用，因此在父组件中，我将name属性发送到了子组件的输入字段中。

子组件操纵值

在子组件中显示操作值需要发生一些事情：


为操纵值创建一个变量，我使用了manipulatedValue。
将操纵逻辑移入其自身的功能


像这样：

manipulate() {
  this.manipulatedValue = "This is the question: " + this.tmpQuestionName;
}

在manipulate和ngOnInit内调用ngOnChanges函数


管子

如果您只需要进行值操纵，最好使用pipe

父组件

@Component({
    selector: 'c-parent',
    template: `
           <div>Parent Question Name: {{question.name}}</div>
           <button type="button" label="xxx" (click)="changeTheValue()">Change the value</button>
           <br/>
           <c-child [tmpQuestionName]="question.name"></c-child>`
})
export class Parent implements OnInit {

    question = { name: '1' };

    ngOnInit() {
        this.question.name = "1";
    }
    changeTheValue(){
        this.question.name = 'new ' + this.question.name;
    }
}

子组件

@Component({
    selector: 'c-child',
    template: `<div>Child Manipulated Value: {{manipulatedValue}}</div>`
})
export class Child implements OnChanges, OnInit {

    @Input() tmpQuestionName; // be updated for the changes
    manipulatedValue;

    ngOnInit() {
      this.manipulate();
    }

    ngOnChanges() {
      this.manipulate();
    }

    manipulate() {
      this.manipulatedValue = "This is the question: " + this.tmpQuestionName; //manipulate the value
    }
}