Angular路由

生成带路由的基本项目

ng new routing-app --routing --defaults

添加两个页面

ng generate component first
ng generate component second

引入到AppRoutingModule文件中

import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';

定义路由

const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
];

router-outlet更换页面

<router-outlet></router-outlet>

通过添加routerLink属性到元素来跳转

<a routerLink="home">home</a>