Show results:
Output text to the console when the scrollbar is near the bottom.
1. First create a new project through the command
of new test01
ng is the angular-cli command; new is the new one; test01 is the project name, the project name can be arbitrary, but try to follow the specifications.
2. Then create three components: home component, list component, item component
of gc home
of the gc list
of gc item
g stands for generate, generate;
c stands for component, component
home, list, item are the generated component names.
3. Use the newly created component as follows:
Fourth, write data
In the list component, a list variable is defined, and the content in it is passed to item as data. What is passing this data through?
In the html page of the list, we see this [item]="list", which is the way that the parent element in angular passes the value to the child element through [child element]="parent element". *ngFor is to loop through the array of lists, and list is each object in the array. Then, we receive the value passed by list in item:
Now, we have an item variable whose value is each object in the lists array.
It is displayed in the html page of the item with the interpolation expression {{...}}.
5. Write the logic part:
First of all, because it is a scroll bar, we have to find a way to get the scroll event. I got it here through RXjs:
The part in the red circle in the figure is the code to achieve this effect.
If you have any questions, please leave me a message.