Передать данные входному свойству в Angular?

Question

Я новичок в Angular, и я прохожу этот тест, где я нашел следующий вопрос, на который не могу ответить:

Let's consider the component <app-user> with an input property named user.
At line 6 what should we replace the ???? with, to pass data to this input property?

 1 import { Component } from '@angular/core'
 2 
 3 @Component({
 4   selector: 'my-app',
 5   template: `
 6      <app-user ????="user">
 7      </app-user>
 8   `
 9 )}
10 export class AppComponent  {
11   user = {
12     name: 'John Doe',
13     email: 'johndoe@mail.com',
14     age: 35,
15   }
16 }

Итак, что я не понимаю: Почему мне нужен @Component вместе с классом AppComponent?

И когда я хочу использовать свойство user из компонента app-user, зачем мне это делать вот так: [user]="user", а не просто [user] без кавычек в конце?

Answer 1

В вашем компоненте app-user вы можете иметь это:

@Component({
  selector: 'app-user',
  template: `
    {{ user.name }}
  `
})
class AppUser {
    @Input() user: any; // Since your variable is named user your attribue on app-user to pass a value is 'user'
}

Вам следует взглянуть на https://angular.io/api/core/Input из документации Angular.

Answer 2

имя входного свойства определяется компонентом app-user. это хорошо описано в angular .io docs для взаимодействия компонентов

ie

• , если ваш app-user компонент имеет пользователя @Input () : User
• тогда, когда вы вызываете этот компонент в HTML, вы делаете <app-user [user]="xxxxx"></app-user>