javascript - 父子操纵之间的共享值(value)

Question

我有两个组件:父组件、子组件。

这是场景:

• 子级从父级获取值并继续更改
• 子项始终会更新更改后的值
• 子级操作该值并显示它
• 在父端，该值不会仅仅因为在子端进行操作而发生更改

示例用例:

我已经用@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 方法来做到这一点还是需要使用其他方法？

Answer 1

Plunker

使用这个

将 this 添加到函数内的变量中，使 question.name 变为 this.question.name。

基元

Primatives如果您希望子组件检测更改，(字符串、数字、 bool 值、符号)更容易使用，因此在父组件中我将 name 属性发送到子组件的输入字段中。

子组件操纵值

要在子组件中显示受操纵的值，需要执行一些操作:

• 为操纵值创建一个变量，我使用了manipulatedValue。
• 将操作逻辑移至其自己的函数中

像这样:

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

• 在 ngOnInit 和 ngOnChanges 中调用 manipulate 函数

管道

如果您需要的只是进行值操作，那么最好使用 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
    }
}