angular组件通信，数据请求，路由一.父子组件及组件之间的通信父组件给子组件传值-@input（可以传递数据，方法以

一.父子组件及组件之间的通信

父组件给子组件传值 -@input（可以传递数据，方法以及整个父组件(传递this [home]=’this’)）

父组件调用子组件的时候传入数据
<app-xx [msg] = ‘msg’></app-xx>
子组件引入Input模块
import {Input} from ‘@angular/core’
子组件中@Input接收父组件传来的数据
@input msg:string

父组件通过@ViewChild获取子组件的数据和方法

(1)给子组件定义#name

<app-child #name></app-child>

(2)在父组件中引入ViewChild

import { ViewChild } from ’@angular/core’

(3)获取子组件

@ViewChild(‘name’) name:any;

(4)调用子组件的数据和方法

this.name.xx;

子组件通过@Output触发父组件的方法

1.子组件引入Output和EventEmitter

import { Output,EventEmitter } from ‘@angular/core’

2.子组件中实例化EventEmitter

@Output() private outer = new EventEmitter<string>()

3.子组件通过EventEmitter对象outer实例广播数据

sendParent(){
this.outer.emit(‘msg from child ’);}

4.父组件调用子组件的时候，定义接收事件，outer就是子组件的EventEmitter对象的outer

<app-child (outer) = ‘runParent($event)’></app-child>

runParent(e){ e;//子组件给父组件广播的数据}

非父子组件通信 -->服务/localSrtroage

Angular数据请求

Angular get请求数据

1.在app.moudule.ts中引入HttpClientModule并注入

import { HttpClientModule } from ‘@angular/common/http’;

2.在用到的地方引入HttpClient并在构造函数中声明

import { HttpClient } from ‘@angular/common/http’

constructor(public http:HttpClient ) {}

3.get请求数据

var api = ‘http://xxx.com’

this.http.get(api).subscribe(response => {})

Angular post 请求数据

1.在app.moudule.ts中引入并注入

import { HttpClientModule } from ‘@angular/common/http’;

2.在用到的地方引入HttpClient,HttpHeaders并在构造函数中声明

import { HttpClient ,HttpHeaders } from ‘@angular/common/http’

constructor(public http:HttpClient ) {}

3.post请求数据

const httpOptions = {

headers:new HttpHeaders({‘Contnet-Type’:’application/json’})

}

var api = ‘http://xxx.com’;

this.http.post(api,{xxx:xxx},httpOptions ).subscribe(response =>{})

路由

路由：根据不同的url地址，动态的让根组件挂载其他组件来实现一个单页面应用

1.安装路由：

ng generate module app-routing --flat --module=app

2.在app-routing.module.ts中引入模块e

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

3.配置路由

import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
  //{ path: '', redirectTo: '/home', pathMatch: 'full' },//默认路由
  { path: 'home', component: HomeComponent },
  { path: 'news', component: NewsComponent },
  { path: 'product', component: ProductComponent },
  //匹配不到路由的时候加载的组件
  {
    path:'**',
    redirectTo:'home'
  }

];
@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports:[RouterModule]
})

//具有选中功能
<a [routerLink]="[ '/home' ]" routerLinkActive="active">home</a>

t } froget传值

（1）传值
<ul>
    <li *ngFor="let item of list;let key=index">
        <a href="@">
            <!-- {{key}} --- {{item}} -->        
            <a [routerLink]="[ '/newscontent']" [queryParams]="{aid:key,name:item}">{{key}} --- {{item}}</a>
        </a>
    </li>
</ul>
（2）接收
import { ActivatedRoute } from '@angular/router';
export class NewscontentComponent implements OnInit {
  constructor(
    public route:ActivatedRoute
  ) { }
  ngOnInit() {
    console.log(this.route.queryParams.subscribe((data)=>{
      console.log(data);
    }));
  }
}

m './co动态路由：

（1）配置动态路由
 { path: 'newscontent/:aid', component: NewscontentComponent },
（2）跳转
<ul>
  <li *ngFor="let item of list;let key=index">
    <a [routerLink]="[ '/newscontent/', key ]">{{key}} -- {{item}}</a>
  </li>
</ul>
（3）接收
    this.route.params.subscribe(data=>{
      console.log(data);
    });

mpon动态路由js跳转

<button (click)='goNewsContent()'>js跳转路由</button>
//.ts
import { Router } from '@angular/router';
  constructor(
    public router:Router
  ) { }
  goNewsContent(){
    //路由跳转
this.router.navigate(['/productcontent'])
// this.router.navigate(['/newscontent/','3'])
  }

ents/pGet传值跳转

<button (click)='getNews()'>get传值跳转路由</button>
//.ts
import { NavigationExtras } from '@angular/router';

  getNews(){
    //跳转并进行get传值
    let queryParams:NavigationExtras = {
      queryParams:{'aid':123}
    }
    this.router.navigate(['/news'],queryParams)
  }

roduct/父子路由（嵌套路由）

const routes: Routes = [
  {
    path: 'home', component: HomeComponent,
    children: [
      { path: 'welcome', component: WelcomeComponent },
      { path: 'setting', component: SettingComponent },
      { path: '**', redirectTo: '/home/welcome' },
    ]
  },
  {
    path: 'product', component: ProductComponent,
    children: [
      { path: 'plist', component: PlistComponent },
      { path: 'pcate', component: PcateComponent },
      { path: '**', redirectTo: '/product/pcate' },
    ]

  },
  { path: 'news', component: NewsComponent },
  { path: '**', redirectTo: '/home' },
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes),
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

product.component';