PhoneGap中文网
标题:
Angularjs4.0命令创建一个配置好路由的项目
[打印本页]
作者:
幽梦林子
时间:
2017-8-11 11:15
标题:
Angularjs4.0命令创建一个配置好路由的项目
本帖最后由 幽梦林子 于 2017-8-11 11:38 编辑
Angularjs4.0如何命令创建一个配置好路由的项目呢?请看以下介绍:
1.命令创建项目
ng new demo02 –-routing
复制代码
详细代码请看最下方图片。
2.创建需要的组件
ng g component home
ng g component news
ng g component newscontent
复制代码
3.找到app-routing.module.ts 配置路由
引入组件
import { HomeComponent } from './home/home.component';
import { NewsComponent } from './news/news.component';
import { NewscontentComponent } from './newscontent/newscontent.component';
复制代码
配置路由
const routes: Routes = [
{path: 'home', component: HomeComponent},
{path: 'news', component: NewsComponent},
{path: 'newscontent/:id', component: NewscontentComponent},
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
}
];
复制代码
4.找到app.component.html根组件模板,配置router-outlet显示动态加载的路由
<h1>
<a routerLink="/home">首页</a>
<a routerLink="/news">新闻</a>
</h1>
<router-outlet></router-outlet>
复制代码
66.png
(81.85 KB, 下载次数: 472)
下载附件
2017-8-11 11:29 上传
欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/)
Powered by Discuz! X3.2