如何通过角度组件属性传递HTML中的对象引用？

Question

<app-user-profile-photo username = "{{ username }}"
 designation = "{{ designation }}"
 userId = "{{ userId }}"></app-user-profile-photo>

这是上面的html，它包含在另一个组件中。

在封闭元素的打字稿中，我定义了这些使用字符串插值动态传递的变量。但这看起来很难看，因为有这么多属性。我想传递一个包含所有这些变量的对象。我知道我可以在使用ngFor时传递一个对象，因为我们在那里有一个本地引用。但是如何动态传递.ts文件中存在的单个对象？我已经尝试了语法的所有其他排列组合。但似乎没有用。我觉得有一个简单的工作。我是JS和Angular的新手

Answer 1

只需使用不带字符串插值的绑定语法

例如

<app-user-profile-photo [username] = "username"
[designation] = "designation"
[userId] = "userId"></app-user-profile-photo>

[object]用于单向绑定或 [（对象）]用于双向绑定