Angular4+组件间传值

Angular4+组件间传值

1. 组件间通信

父组件传值给子组件：

父组件：

<app-index [title]="title" [run]="run"></app-index>

子组件：

import { Input } from '@angular/core';
@Input() title;
@Input() run;
//这样就可以直接使用{{title}},和this.run在子组件使用父组件的值和方法。

子组件传值给父组件

子组件中：

import { EventEmitter, Input, Output } from '@angular/core';
@Output() selectionChange = new EventEmitter();
//事件中
 this.selectionChange.emit("我是子组件的数据");

父组件中

// selectionChange即是子组件发送的数据
<app-index (selectionChange)="getData($event)"></app-index>
// ts文件中：
getData(msg:string)
{
   console.log(msg);// 接收到的数据
}

父组件主动调用子组件(本地变量)

// 引用子组件
<app-index #index></app-index>
// 使用子组件中的方法
<button (click)="index.childRun()">调用index中的方法</button>

也可以在ts文件中调用：

// 引用子组件 html文件
<app-index #index></app-index>
<button (click)="parentClick(index)">调用index中的方法</button>
// ts 文件
parentClick(obj)
{
    obj.childRun();
}

ViewChild主动获取数据:

在页面中引入ViewChild

import { ViewChild } from '@angular/core';
@ViewChild("index") index;
// html中引用组件
<app-index #index></app-index>  //#index相当于是一个选择器，包含模板
<button (click)="parentClick()">调用index中的方法</button>
// ts文件中使用子组件的方法和数据
parentChild()
{
    this.index.childRun();
}

2.Service

建立一个中间service—MyService接收需要传递的数据

MyService.service.ts中

export class MyService {
   ids:any[];
}

one.component.ts(传递参数的组件)

  constructor(
    private myService: MyService,
  ) {
  }

ngOnInit() {
   this.myService.ids=[1,2,3]
}

two.component.ts(获取参数的组件)

myIds:any[];
constructor(
    private myService: MyService,
) {
}
ngOnInit) {
  this.myIds=this.myService.ids;(获取参数)
}

---

3.订阅

方法一

MyService中

  private Source = new Subject<any>();
  $status = this.Source.asObservable();
  StatusMission(ids: any) {
    this.Source.next(ids);
  }

one.component.ts(传递参数的组件)

ids=[1,2,3];
constructor(
  private myService: MyService,
) {
}

ngOnInit() {
  this.myService.StatusMission(this.ids)
}

two.component.ts(获取参数的组件)

myIds:any[];
subscription: Subscription;
constructor(
    private myService: MyService,
) {
}
ngOnInit) {
   this.subscription = this.myService.$status.subscribe(ids => {
   this.myIds=ids; (获取参数)
  });
}
ngOnDestroy() {
  this.subscription.unsubscribe();
}

方法二

MyService中

$loading: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
loading(): Observable<boolean> {
  return this.$loading.asObservable();
}
changeLoading(value: boolean): void {
  this.$loading.next(value);
}

one.component.ts(传递参数的组件)

this.myService.changeLoading(true);

two.component.ts(获取参数的组件)

this.myService.loading().subscribe((res) => {
   this.loading = res;
});

4.路由传值

1.在查询参数中传递数据

/product?id=1&name=2  =>  ActivatedRoute.queryParams[id]
[routerLink]="['/product']" [queryParams]="{id:1}"
this.routeInfo.snapshot.queryParams['id']

2.在路由的路径中传递数据

{path:/product/:id}  =>  /product/1  =>  ActivatedRoute.params[id]
[routerLink]="['/product',1]" 
this.routeInfo.snapshot.params['id']

3.在路由配置中传递数据

{path:/product,component:ProductComponent,data:[{isProd:true}]} => ActivatedRoute.data[0][isProd]

参数快照和参数订阅（subscribe）

this.routeInfo.snapshot.params['id'] //参数快照
this.routeInfo.params.subscribe((params:Params)=>{this.id=params['id']}) //参数订阅，解决相同页面改变参数的问题

5.存Session Storage(不推荐)

最后：

1. 组件间传值/路由传值/session stotage—页面刷新，数据不会丢失
2. service/订阅—页面刷新，数据会丢失 
3. 根据自己的需要选择不同的传参方式