通过父组件传递输入和输出
Passing input and output through a parent component
我正在尝试将一些信息从组件 A 通过父组件传递到组件 B。
我有一个组件 A,其中有输出。
componentA.ts
@Output() status = new EventEmitter();
public getColor() {
...
this.emit(color);
}
componentB.ts
@Input('status') status;
ngOnInit() {
console.log(this.status) // Got EventEmitter false object
}
parent.html(需要在这个HTML中包含组件B)
<componentA (status)="getStatus(s)"></componentA>
<componentB [status]="status"></componentB>
parent.ts
@Output() status=new EventEmitter();
public getStatus(s) {
this.status.emit(s)
}
目前我收到 "EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false…" 消息,我无法查看从组件 A 传递的信息。我验证 s 存在于 getStatus 函数中。如果有更好的方法,请指教。
你的错误,
组件A中的this.emit
,应该是this.status.emit(..)
- 在你的组件 B 中,你应该使用
ngOnChanges
来监听变化而不是 ngOnInit
按照下面的代码,
@Component({
selector: 'my-app',
template: `
<div>
{{status}}
<componentA (status)="getStatus($event)"></componentA>
<componentB [status]="status"></componentB>
</div>
`,
})
export class App {
name:string;
status:string;
getStatus(event){
console.log(event)
this.status = event
}
constructor() {
}
}
@Component({
selector: 'componentA',
template: `
<div>
<button (click)="getColor()"> Click for red color</button>
</div>
`,
})
export class CompA {
@Output() status = new EventEmitter<string>();
public getColor() {
this.status.emit('red');
}
}
@Component({
selector: 'componentB',
template: `
<div>
</div>
`,
})
export class CompB {
@Input('status') status;
ngOnChanges() {
console.log('CompB input arrived', this.status) // Got EventEmitter false object
}
}
我正在尝试将一些信息从组件 A 通过父组件传递到组件 B。
我有一个组件 A,其中有输出。
componentA.ts
@Output() status = new EventEmitter();
public getColor() {
...
this.emit(color);
}
componentB.ts
@Input('status') status;
ngOnInit() {
console.log(this.status) // Got EventEmitter false object
}
parent.html(需要在这个HTML中包含组件B)
<componentA (status)="getStatus(s)"></componentA>
<componentB [status]="status"></componentB>
parent.ts
@Output() status=new EventEmitter();
public getStatus(s) {
this.status.emit(s)
}
目前我收到 "EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false…" 消息,我无法查看从组件 A 传递的信息。我验证 s 存在于 getStatus 函数中。如果有更好的方法,请指教。
你的错误,
-
组件A中的
this.emit
,应该是this.status.emit(..)
- 在你的组件 B 中,你应该使用
ngOnChanges
来监听变化而不是 ngOnInit
按照下面的代码,
@Component({
selector: 'my-app',
template: `
<div>
{{status}}
<componentA (status)="getStatus($event)"></componentA>
<componentB [status]="status"></componentB>
</div>
`,
})
export class App {
name:string;
status:string;
getStatus(event){
console.log(event)
this.status = event
}
constructor() {
}
}
@Component({
selector: 'componentA',
template: `
<div>
<button (click)="getColor()"> Click for red color</button>
</div>
`,
})
export class CompA {
@Output() status = new EventEmitter<string>();
public getColor() {
this.status.emit('red');
}
}
@Component({
selector: 'componentB',
template: `
<div>
</div>
`,
})
export class CompB {
@Input('status') status;
ngOnChanges() {
console.log('CompB input arrived', this.status) // Got EventEmitter false object
}
}