an angular setting in two routing (switching the navigation bar)

A navigation

detailed steps

1, create angular project

ng new angualrdemo08 --skip-install

Into the project cd angular08, and download a variety of packages. Use npm ior cnpm icommand

2, create the required components

ng g component home
ng g component new
ng g component header
ng g component home/asideone
ng g component home/asidetwo
ng g componenthome/asidethreeand many more

3, find the app-routing.module.ts routing configuration

Created with the Component Command, will automatically introduce app.module.tsfile, copy and paste these paths to app-routing.module.tsfile, as an example, this part of the paste into the app-routing.module.tsfile:

import { HomeComponent } from './home/home.component'; 
import { NewComponent } from './new/new.component';
import { NewscontentComponent } from './newscontent/newscontent.component';
import { HeaderComponent } from './header/header.component';

Add Route

const routes: Routes = [
  { path: '', redirectTo: '/header',  pathMatch: 'full' },//默认路径
  { path:'header', component: HeaderComponent },
  { path:'home',   component: HomeComponent},
  { path:'new', component: NewComponent },
  { path:'newscontent', component: NewscontentComponent },
  { path: '**', redirectTo: 'header'}
];

4, to find the root component template app.component.html configured router-outlet route display dynamic loading

<h1>
<a routerLink="/home">首页</a>
<a routerLink="/news">新闻</a>
</h1>
<router-outlet></router-outlet>

In this way, a routing configuration would be finished

Two routes

1, the routing configuration app-routing.module.ts introduction means

I want to put the assembly created in the introduction of two incoming directory, see step 3 above.

import { OneComponent } from './home/one/one.component';
import { TwoComponent } from './home/two/two.component';
import { ThreeComponent } from './home/three/three.component';

Configuring Routing (differences, focus)

children can not change the keyword
to whom add routes, wrote in which sub-routing years, and here I wrote a sub-route to home, in the home pages of the jump page, with natural home for the pre-routing

{ path: '', redirectTo: '/header',  pathMatch: 'full' },
  { path:'header', component: HeaderComponent },
  { path:'home', 
  	component: HomeComponent,
	children:[
    	 { path:'home/asideone', component: OneComponent },
   		 { path:'home/asidetwo', component: TwoComponent },
  		 { path:'home/asidethree', component: ThreeComponent }
  	] 
  },

2, router-outlet configured to display dynamic loading route

In the home of pages

<div class="aside">
        <ul>
            <li>
                <a routerLink="home/asideone" nzSelected>1</a>
            </li>
            <li>
                <a routerLink="home/asidetwo">2</a>
            </li>
            <li>
                <a routerLink="home/asidethree">3</a>
            </li>
        </ul>
    </div>
    <div class="main">
        <router-outlet></router-outlet>
    </div>