Subroutine learning notes:
The same configuration methods for subroutines and routes declare the entry of a good route, the path of the route, and the exit of the route. The difference is that the self-routine is nested in the subroutine and children indicate that this is a subroutine and can be nested infinitely.
Routing entrance: It should be noted that the subrouting entrance cannot be used / to the path name. / will tell angular to find the component and find the module corresponding to the component. The subrouting needs to use./
1. Set the root route entry:Setting on the template (html), the routing entrance is to click where to start routing to the new component (click the homepage to go)
<a [routerLink]="['/']">Home page</a>
<a [routerLink]="['/product']" [queryParams]="{id:1}">Product details</a>
<a [routerLink]="['/home',2]">Home page</a>
Subroutine portal:(Sub-routing is ./) Word routing is the routes that are nested in the route can be nested infinitely.
<a [routerLink]="['./']">Product Description</a> <a [routerLink]="['./seller',99]">Product Description</a>
Routing exit (Routing exit refers to where the new component will be displayed. The entry specifies when the new component will be loaded, and the exit refers to where the loaded component will be displayed): both the exit and the entry of the route are set in the template.
<router-outlet></router-outlet>
Routing path:When the route's exit entrance is set, configure the route's path. The path specifies which template is loaded when accessing which path
const routes:Routes=[
{path:'',redirectTo:'/home',pathMatch:'full'},
{path:'product',component:ProductComponent,children:[
{path:'',component:ProductdescComponent} ,
{path:'seller/:id',component:SellerComponent}
]},
{path:'home/:id',component:HomeComponent},//The entire path is divided into two variables, one is the path, and the other is the parameter {path:'**',component:Code404Component}//Wildcard, accessed when the path cannot be found];
Auxiliary routing:
Three steps:
1. Define an auxiliary routing socket at the outlet of the main route:That is to define the exit of a secondary route: the exit definition of the secondary route is the same as the primary route, except that the secondary route has one more name attribute than the primary route: used to specify which components the secondary route displays.
Here, the auxiliary route displays the component called the corresponding aux
<router-outlet></router-outlet> <router-outlet name="aux"></router-outlet>
2. Configure the auxiliary routing path:An outlet attribute must be added to specify the auxiliary route exit (socket) of the name of the route;
Here it refers to the source of the auxiliary route called aux when accessing chat.
{path:'chat',component:XhatComponent,outlet:'aux'},
3. Configure the entry parameters:The parameter of the auxiliary route will be an object, which has an attribute outlets in this object. The value of this attribute is also an object. The name attribute is passed in the object to specify the name of the auxiliary route to be displayed. The value is the component path that the auxiliary route needs to be displayed; for example: the auxiliary route named aux will display the component whose path is chat
It should be noted that when you do not want the auxiliary route to be displayed, you can set the name to null.
Here it refers to the component with the loading path corresponding to chat when clicking to start chat, which is displayed on the auxiliary route exit named aux.
<a [routerLink]="[{outlets:{aux:'chat'}}]">Start chatting</a>
<a [routerLink]="[{outlets:{aux:null}}]">End the chat</a>
When you want to jump to the auxiliary route and the main route jumps to the specified component: you can add an attribute: primary to the entrance file. The value of the attribute is the route path of the main component that needs to be redirected. For example, when clicking chat below, the main route will jump back to the component under the home path.
<a [routerLink]="[{outlets:{primary:home, aux:'chat'}}]">Start chatting</a>
The above detailed explanation of angular4 subroutines & auxiliary routes is all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.