angular組件通信，數據請求，路由

一.父子組件及組件之間的通信

父組件給子組件傳值 -@input（可以傳遞數據，方法以及整個父組件(傳遞this  [home]=’this’)）

1. 父組件調用子組件的時候傳入數據 
    <app-xx [msg] = ‘msg’></app-xx>
2. 子組件引入Input模塊    
   import {Input} from ‘@angular/core’
3. 子組件中@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';