幽梦林子 发表于 2017-8-11 11:49:26

Angularjs4.0 路由配置

Angularjs4.0如何自己创建路由呢,Angularjs4.0 路由如何配置?具体操作需要以下几个步骤:


1.新建app-routing.module.ts,以及新建几个组件

ng g component home
ng g component news
ng g component newscontent


2.引入模块

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


3.引入组件

import { HomeComponent } from './home/home.component';
import { NewsComponent } from './news/news.component';

import { NewscontentComponent } from './newscontent/newscontent.component';


4.配置组件

const routes: Routes = [

{path: 'home', component: HomeComponent},
{path: 'news', component: NewsComponent},
{path: 'newscontent/:id', component: NewscontentComponent},
{
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
}

];


5.配置模块 暴露模块


@NgModule({
imports: ,
exports:
})
export class AppRoutingModule { }


6.在app.module.ts 引入刚才定义的路由

import { AppRoutingModule } from './app-routing.module';


7.app.module.ts里面的import注册这个路由模块

imports: [
    BrowserModule,
    AppRoutingModule
<font size="3"><b>]</b></font>

a)找到app.component.html根组件模板,配置router-outlet显示动态加载的路由

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

<router-outlet></router-outlet>



页: [1]
查看完整版本: Angularjs4.0 路由配置