Javascript 父操作和子操作之间的共享值

我有两个组件：父级、子级

以下是场景：

@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试过了。因为@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
    }
}

@组件({
选择器：“c-parent”，
模板：`
{{问题.名称}


`
})
导出类父级实现OnInit{
问题：问题；//不要从孩子的角度改变
恩戈尼尼特（）{
问题：name=“1”；
}
更改值（）{
问题1.name=“2”；
}
}
@组成部分({
选择器：“c-child”，
模板：`{tmpQuestion.name}}`
})
导出类子级实现OnInit{
@Input（）tmpQuestion:Question；//将针对更改进行更新
恩戈尼尼特（）{
tmpQuestion.name=“这就是问题：“+question.name；//操纵该值
}
}

我该如何使用@Input方法，还是需要使用其他方法

使用

此

将

this

添加到函数内部的变量，使

question.name

变为

this.question.name

灵长类动物 （字符串、数字、布尔值、符号）更易于使用，如果希望子组件检测到更改，那么在父组件中，我将name属性发送到子组件的输入字段中

子组件操纵值 要在子组件中显示操纵的值，需要执行以下操作：

• 为操纵值创建一个变量，我使用了

  manufacturedValue

• 将操作逻辑移到它自己的功能中

像这样：

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

• 在

  ngOnInit

  和

  ngochanges

管 如果您只需要进行值操作，那么最好使用

父组件

@组件({
选择器：“c-parent”，
模板：`
父问题名称：{{Question.Name}
更改值


`
})
导出类父级实现OnInit{
问题={name:'1'}；
恩戈尼尼特（）{
this.question.name=“1”；
}
更改值（）{
this.question.name='new'+this.question.name；
}
}

子组件

@组件({
选择器：“c-child”，
模板：`子操纵值：{{manipledValue}}`
})
导出类子级实现OnChanges、OnInit{
@Input（）tmpQuestionName；//将针对更改进行更新
操纵价值；
恩戈尼尼特（）{
这个。操纵（）；
}
ngOnChanges（）{
这个。操纵（）；
}
操纵{
this.manufactedValue=“这是一个问题：“+this.tmpQuestionName；//操纵该值
}
}

如果不想让父对象看到子对象在值为对象时所做的更改，则需要先克隆该值，然后再将其发送给子对象。默认情况下，将复制基本值

number

，

string

，

boolean

。对象通过引用发送。

@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
    }
}