如何在angular 4中创建组件定义类的实例？

Question

I am new in angular 4 and I am learning it day by day using tutorials but I am not understanding after a lot of research that how to create an instance of component class.

This is the sample code that I am following

export class UserItemComponent implements OnInit {
 name: string; // <-- added name property

   constructor() {
    this.name = 'Felipe'; // set the name
   }

   ngOnInit() {
   }

}

I am rendering this component /user-item.component.html like this

<p>
 Hello {{ name }}
</p>

and then /app.component.html file

<app-user-item></app-user-item>

It displays the name "Felipe" correctly but I am not understanding that how It is working. I know about constructor is calling when the instance is creating but I don't know which one is the instance in the below?

<app-user-item></app-user-item>
{{ name }}

I know oop concepts very well but in angular I am still confuse about its terms and flow. Any help would be highly appreciated.Thanks.

Answer 1

@Antikhippe when your app get load, it rend a view which is app.component.html. In your case that View is rendering another View "" which has this piece of code "

Hello {{ name }}

" when angular see the {{ ...}} it knows that you are referencing a property that is available in the component most of the time the .ts. That concept is what angular call "Data binding". you can create a class in a separate file (.ts) within the component folder , import the class in the component class and instantiate an object of the class just like in java : "this.model = new SubjectInfo();" "this" has the same meaning like in all OOP it reference the property of the component class. "SubjectInfo" is the class that I imported in my component class. I hope that help.