发表于: 2021-04-06 19:55:25

1 1959


今天完成的事情:定义了三个组件页面

明天计划的事情:完成任务

收获:如何配置路由?

一.首先新建一个组件

ng g c login

login是要创建的组件的名字,angular项目的组件都放在src下的app目录下,一个文件夹就代表一个组件,而每个文件夹里都可以嵌套多个文件夹,即嵌套多个组件。

执行此命令后,会自动生成一个组件的文件,且 app.module.ts 中也会自动引入新建的组件

二.路由配置

在 app-routing.module.ts 文件中配置路由,实现组建的切换,页面的跳转

1.首先引入组件

import { SearchComponent } from './search/search.component';
import { WelcomeComponent } from './welcome/welcome.component';

可以从 app.module.ts 文件里直接复制过来,毕竟创建组件时就自动引入到 app.module.ts 里了,又在同一目录下,引入的路径也是一样的,可以直接拿过来用

2.配置路由

const routes: Routes = [
  { path''pathMatch'full'redirectTo'welcome'},
  { path'welcome'componentWelcomeComponent},
  { path'search'componentSearchComponent }
];

第一条配置的是默认路径,也就是在浏览器中打开项目时,默认显示的页面

3.跳转

 <li [routerLink]="['/search']" [routerLinkActive]="['active']">Article信息</li>

最后在html配置跳转路径


返回列表 返回列表
评论

    分享到