Angular 5向组件传递对象异常，请求排查问题原因

你之所以看到console.log(this.view)输出"[object Object]"，核心问题出在HTML里传递输入属性的方式上！

看你这段代码：

<app-video *ngSwitchCase="'video'" view="{{view}}"></app-video>

这里用的{{}}是字符串插值语法，它的作用是把表达式转换成字符串后渲染到页面上。当你把一个对象塞进去时，Angular会自动调用对象的toString()方法，结果就变成了默认的"[object Object]"，而不是把整个PresentObject对象传递给组件的@Input() view属性。

正确的写法应该是这样： #

使用Angular的属性绑定语法（方括号[]），它会直接传递对象的引用，而不是转换成字符串：

<app-video *ngSwitchCase="'video'" [view]="view"></app-video>

如果你不想用方括号，也可以用属性绑定的完整写法（不过这个写法很少用）：

<app-video *ngSwitchCase="'video'" bind-view="view"></app-video>

验证效果 #

修改之后，再去VideoComponent的ngOnInit里打印this.view，就能看到真正的PresentObject对象了，console.log(this.view.text)也能正确输出对象的text属性值。

小提醒：以后在Angular里传递非字符串类型的数据（比如对象、数字、布尔值）给组件输入属性时，一定要记得用方括号的属性绑定，别再用字符串插值啦！

内容的提问来源于stack exchange，提问作者Marc Rasmussen