发表于： 2021-05-21 21:34:02
1 1980
今天完成的事情：慢慢的懂了些；基础路由配置好了，实现了组件之间的切换
明天计划的事情：完成任务六，用 angular 写代码
遇到的问题：部署还没看明白；
收获：
路由配置：首先要创建路由模块； ng new routing-app ；
创建需要的组件：ng g c 组件名 动态生成组件；
并把这些组件分别导入app.module.ts模块中和刚创建的app.routing.module.ts（路由模块）文件中；如下：
app.module.ts模块：
//当组件创建好的时候，这些组件已经被自动引进；
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MainComponent } from './main/main.component';
import { LoongComponent } from './loong/loong.component';
app.routing.module.ts模块：
//引进组件路径
import { MainComponent } from './main/main.component';
import { LoongComponent } from './loong/loong.component';
const routes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'loong' },
{ path: 'loong', component: LoongComponent },
{ path: 'main', component: MainComponent },
{ path: '**', component: LoongComponent }
];
配置路由：第一条配置的是默认路径，也就是在浏览器中打开项目时，默认显示的页面，
简单的跳转配置，在HTML中写入组件之间的跳转
<ul>
<li>
<h2><a routerLink="loong">主页</a></h2>
</li>
<li>
<h2><a routerLink="main">查看</a></h2>
</li>
</ul>
返回列表
评论