父和子操作之间的共享值

Question

我有两个组成部分：Parent，Child。

以下是该方案：

• Child从Parent获取继续更改的值
• 始终更新子项以更改值
• Child操纵值并显示它
• 在父方面，价值不会因为它在儿童方面的操纵而改变

示例用例：

我已经用@Input尝试了这个。因为@Input值在Child侧被操纵，所以在Parent侧也会改变。这是我想要阻止的，但仍然希望继续从Parent端获取更新的值。

@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

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

Primatives

Primatives（String，Number，Boolean，Symbol）更容易使用，如果您希望子组件检测到更改，那么在父组件中我将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
    }
}