angular05

//这个是路由的配置
const routeConfig: Routes = [
  {path: ‘stock‘, component: StockManageComponent}
]
//实际上是使用RouterModule.forRoot(routeConfig)注入路由的配置
imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  RouterModule.forRoot(routeConfig)
]

<section class="content">
  <router-outlet></router-outlet>
</section>

<a href="javascript:;" (click)="nav(‘stock‘)"><i class="fa fa-link"></i> <span>股票管理</span></a>

constructor(public router: Router) { }

ngOnInit() {
}
nav(url: string) {
	this.router.navigateByUrl(url);
}

export class MenuComponent implements OnInit {
  menus: Array<Menu>;
  currentMenuId: number;
  constructor(public router: Router) { }

  ngOnInit() {
    this.menus = [
      new Menu(1, ‘首页‘, ‘index‘),
      new Menu(2, ‘股票管理‘, ‘stock‘)
    ]
  }
  nav(menu: Menu) {
    this.router.navigateByUrl(menu.Link);
    this.currentMenuId = menu.id
  }
}

export class Menu {
  constructor(
    public id: number,
    public name: string,
    public Link: string
  ) {

  }
}

//如果循环体中menu.id == currentMenuId，那么[class.active]就被使用激活
<li *ngFor="let menu of menus" [class.active]=‘currentMenuId == menu.id‘>
  <a href="javascript:;" (click)="nav(menu)">
    <i class="fa fa-link"></i> 
    <span>{{menu.name}}</span>
  </a>
</li>

//订阅事件，进行处理
export class ContentComponent implements OnInit {
  public pageTitle: string;
  public pageDesc: string;
  constructor(
    public router: Router
  ) {
      // 订阅路由中导航结束的事件
      router.events.filter(event => event instanceof NavigationEnd)
      .subscribe((event: NavigationEnd) => {
        if (event.url === ‘/dash‘) {
          this.pageTitle = ‘首页‘
          console.log(‘首页‘);
        } else if (event.url.startsWith(‘/stock‘)) {
          this.pageTitle = ‘股票信息‘;
          console.log(‘股票信息‘);
        }
      });
   }

  ngOnInit() {

  }
}


<h1>
  {{pageTitle}}
  <small>{{pageDesc}}</small>
</h1>

1.创建component stockForm

2.创建一个指向stockForm的路由，传参数，带过去
 {path: ‘stock/:id‘, component: StockFormComponent}