分享一下我的经验:
向Angular 4应用程序添加输入
假设我们有两个组件:
parent-component
child-component
我们想要从parent-component
向child-component
传递某些值,即从parent-component.html
到child-component.ts
的一个@Input
。以下是一个示例,解释了实现方法:
parent-component.html
如下所示:
<child-component [someInputValue]="someInputValue"></child-component>
parent-component.ts
如下所示:
class ParentComponent {
someInputValue = 'Some Input Value';
}
child-component.html
的内容如下:
<p>一些输入值 {{someInputValue}}</p>
child-component.ts
的内容如下:
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'child-component',
templateUrl: './child-component.html'
})
export class ChildComponent implements OnInit {
@Input() someInputValue: String = "Some default value";
@Input()
set setSomeInputValue(val) {
this.someInputValue += " modified";
}
constructor() {
console.log('someInputValue in constructor ************** ', this.someInputValue);
}
ngOnInit() {
console.log('someInputValue in ngOnInit ************** ', this.someInputValue);
}
}
请注意,
@Input
值的值在
ngOnInit()
中可用,而不在
constructor()
中可用。
Angular 2/4中的对象引用行为
在Javascript中,对象被存储为引用。可以借助Angular 2 / 4来复现这种确切行为。下面是一个解释实现的示例:
parent-component.ts
如下所示:
class ParentComponent {
someInputValue = {input: 'Some Input Value'};
}
parent-component.html
看起来像这样:
{{someInputValue.input}}
child-component.html
看起来像这样:
<p>Some Input Value {{someInputValue}}</p>
change input
child-component.ts
看起来是这样的:
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'child-component',
templateUrl: './child-component.html'
})
export class ChildComponent implements OnInit {
@Input() someInputValue = {input:"Some default value"};
@Input()
set setSomeInputValue(val) {
this.someInputValue.input += " set from setter";
}
constructor() {
console.log('someInputValue in constructor ************** ', this.someInputValue);
}
ngOnInit() {
console.log('someInputValue in ngOnInit ************** ', this.someInputValue);
}
changeInput(){
this.someInputValue.input += " changed";
}
}
changeInput()
函数会改变 ChildComponent
和 ParentComponent
中的 someInputValue
值,因为它们是同一个引用。由于 someInputValue
是从 ParentComponent
的 someInputValue
对象中引用的 - 在 ChildComponent
中对 someInputValue
对象的更改也会更改 ParentComponent
的 someInputValue
对象的值。这是不正确的。引用不应该被更改。