Angular Routing - Auxiliary Routing

1. Auxiliary routing syntax

Control multiple outlet contents at the same time.

first step:

In addition to the main socket on the template, you also need to declare a socket with a name attribute

Step 2:

Which components can be displayed on the socket with the name aux configured in the routing configuration, such as xxx and yyy components.

third step:

When navigating, when routing to an address, which component is displayed on the auxiliary socket

2. Examples

The chat function can be used on any page (product listing page, product detail page, main page, etc.). 

Step 1: Define a socket on the template of the app component to display the chat panel. 

<a [routerLink]="['/home']">主页</a>
<a [routerLink]="['/product',2]">商品详情</a>
<input type="button" value="商品详情" (click)="toProductDetails()">
<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>

Step 2: Develop a chat room component separately and only display it on the newly defined socket.

Create a new chat component and modify the template

of gc chat

< textarea 
 placeholder ="Please enter the chat content" n
class="chat"
ame="" id="" cols="30" rows="10"></textarea>

.chat{
background: green;
height: 100px;
width: 30%;
float: left;
box-sizing: border-box;
}

Modify the template of the home component and product component, wrap a layer of div and set the style

.product{
    background: yellow;
    height: 100px;
    width: 70%;
    float: left;
    box-sizing: border-box;
}

.home{
    background: red;
    height: 100px;
    width: 70%;
    float: left;
    box-sizing: border-box;
}

Configure the route to determine whether the chat component is displayed or not

const routes: Routes = [
  { path: '', redirectTo : 'home',pathMatch:'full' }, 
  { path: 'chat', component: ChatComponent, outlet: "aux"}, // auxiliary route 
  { path: 'home' , component: HomeComponent },
  { path: 'product/:id', component: ProductComponent, children:[
    { path: '', component : ProductDescComponent },
    { path: 'seller/:id', component : SellerInfoComponent }
  ] },
  { path: '**', component: Code404Component }
];

Step 3: Control whether the new socket displays the chat panel through routing parameters

Added start chat and end chat buttons

<!--The content below is only a placeholder and can be replaced.-->
<a [routerLink]="['/home']">主页</a>
<a [routerLink]="['/product',2]">商品详情</a>
<input type="button" value="商品详情" (click)="toProductDetails()">

< a [routerLink] ="[{outlets: {aux: 'chat'}}]" > Start chat </a> < a [ routerLink ] ="[{outlets: {aux: null}}]" > End chat </a> _ _


<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>

Effect:

Click to start chat, there is an additional (aux:chat) after the URL: the auxiliary routing aux socket routing path is chat, and the chat path corresponds to the ChatComponent.

The main route can be switched at will without affecting the auxiliary route

http://localhost:4200/home(aux:chat)
http://localhost:4200/product/2(aux:chat)

 

Extension: If you want to display the chat component, the main route should jump to the home component.

Use priamry to specify the main route path, because the main route does not have a name.

< a [routerLink] ="[{outlets: {primary: 'home' , aux: 'chat'}}]" > Start chat </ a >

 

The author of this article starof , because the knowledge itself is changing, the author is also constantly learning and growing, and the content of the article is also updated regularly. In order to avoid misleading readers and facilitate tracing back to the source, please reprint and indicate the source: http://www.cnblogs.com/ starof/p/9006227.html If you  have any questions, please discuss with me and make progress together.