路由：

调用路由模块

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

 

设置子路由

{ path: ‘home‘,  component: HomeComponent ,children:childRoutes},

 

const childRoutes : Routes=[
  { path: ‘‘, redirectTo: ‘index‘, pathMatch: ‘full‘ },
  { path: ‘index‘,  component: IndexComponent }
]

 

在需要跳路由的标签加上属性 routerLink="home"

在需要加载路由的界面添加标签 <router-outlet></router-outlet>

路由跳转(这个跳转的方法，资源不会调用)

this.router.navigateByUrl("/home");

 

模块：

在ts中模块的基本结构如下：

import { Component } from ‘@angular/core‘;

@Component({
  selector: ‘app-home‘,
  templateUrl: ‘./home.component.html‘
})
export class HomeComponent {

}

import { Component, OnInit } from ‘@angular/core‘;

@Component({
  selector: ‘my-home‘,
  templateUrl: ‘./home.component.html‘
})

export class HomeComponent implements OnInit{

  ngOnInit(): void {

  }
}

路径：

获取路径（/home/index）

path:Location;
constructor(location: Location) {
  this.path = location;
}

 

调用接口

return this.http.get(‘http://localhost:81/angular.php‘)
 .map(response => response.json()).subscribe(data=http://www.mamicode.com/>{
 this.res = data.res;

})