angular4-路由

Angular路由配置详解

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 56 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/avidya/p/7465642.html

文章标签：

#javascript #ViewUI

导入，配置路由信息

import { Routes, RouterModule } from '@angular/router';
import { UserComponent } from './user.component';

export const ROUTES: Routes = [
  { 
　　path: 'user', 
　　component: UserComponent ,
　　outlet:'left'
　}

  { 
　　path: 'user', 
　　component: UserComponent ,
　　outlet:'right'
 　}

];
 @NgModule({ imports: [ BrowserModule,  RouterModule.forRoot(ROUTES) ], // ... }) 
export class AppModule {}

routerLink 指令

<nav>
  <a routerLink="/">首页</a>
  <a routerLink="/user">我的</a>
</nav>

router-outlet 指令（该指令用于告诉 Angular 加载组件的文档位置，当 Angular 路由匹配到响应路径，并成功找到需要加载的组件时，它将动态创建对应的组件，并将其作为兄弟元素，插入到 router-outlet 元素中。）

@Component({
  selector: 'app-root',
  template: `
    <div class="app">
      <h3>Our app</h3>
      <router-outlet name="left"></router-outlet>//出口1
　　　 <router-outlet name="right"></router-outlet>

    </div>
  `
})
export class AppComponent {}

路由使用eg:

配置路由信息
export const ROUTES: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'user' },
  { path: 'user', component: UserComponent },
  { path: 'members', component: MembersComponent }
];

@NgModule({
  imports: [BrowserModule, FormsModule, HttpModule,
    RouterModule.forRoot(ROUTES)],
  // ...
})
export class AppModule { }

配置路由导航
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div class="app">
      <h1>欢迎来到Angular的世界</h1>
      <nav>
        <a routerLink="/user">我的</a>
        <a routerLink="/members">Angular成员</a>
      </nav>
      <router-outlet></router-outlet>
    </div>
  `,
})
export class AppComponent { }