使用Angular4怎么實現(xiàn)組件通訊-創(chuàng)新互聯(lián)

使用Angular4怎么實現(xiàn)組件通訊？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

成都創(chuàng)新互聯(lián)公司憑借專業(yè)的設(shè)計團隊扎實的技術(shù)支持、優(yōu)質(zhì)高效的服務意識和豐厚的資源優(yōu)勢，提供專業(yè)的網(wǎng)站策劃、成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、網(wǎng)站優(yōu)化、軟件開發(fā)、網(wǎng)站改版等服務，在成都十年的網(wǎng)站建設(shè)設(shè)計經(jīng)驗，為成都上千家中小型企業(yè)策劃設(shè)計了網(wǎng)站。

1.父→子 input

parent.ts

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

@Component({
 selector: 'page-parent',
 templateUrl: 'parent.html',
})
export class ParentPage {
 i: number = 0;
 constructor() {
  setInterval(() => {
   this.i++;
  }, 1000)
 }
}

parent.html

<ion-header>
 <ion-navbar>
  <ion-title>Parent</ion-title>
 </ion-navbar>
</ion-header>

<ion-content padding>
 <h3>Parent</h3>
 <page-child [content]="i"></page-child>
</ion-content>

child.ts

import { Component,Input } from '@angular/core';

@Component({
 selector: 'page-child',
 templateUrl: 'child.html',
})
export class ChildPage {
@Input() content:string;
 constructor() {
 }
}

child.html

<ion-content padding>
child:{{content}}
</ion-content>

結(jié)果:

使用Angular4怎么實現(xiàn)組件通訊

2.子→父 output

parent.ts

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

@Component({
 selector: 'page-parent',
 templateUrl: 'parent.html',
})
export class ParentPage {
 i: number = 0;

 numberIChange(i:number){
   this.i = i;
 }
}

parent.html

<ion-header>
 <ion-navbar>
  <ion-title>Parent</ion-title>
 </ion-navbar>
</ion-header>

<ion-content padding>
 <h3>Parent:{{i}}</h3>
 <page-child (changeNumber)="numberIChange($event)"></page-child>
</ion-content>

child.ts

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
 selector: 'page-child',
 templateUrl: 'child.html',
})

export class ChildPage {
 @Output() changeNumber: EventEmitter<number> = new EventEmitter();
 Number: number = 0;
 constructor() {
  setInterval(() => {
   this.changeNumber.emit(++this.Number);
  }, 1000)
 }
}

child.html

<ion-content padding>
   child
</ion-content>

結(jié)果：

使用Angular4怎么實現(xiàn)組件通訊

3.子獲得父實例

parent.ts

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

@Component({
 selector: 'page-parent',
 templateUrl: 'parent.html',
})
export class ParentPage {
 i:number = 0;
}

parent.html

<ion-header>
 <ion-navbar>
  <ion-title>Parent</ion-title>
 </ion-navbar>
</ion-header>

<ion-content padding>
 <h2>parent: {{i}}</h2>
 <page-child></page-child>
</ion-content>

child.ts

import { Component, Input, EventEmitter, Output,Host,Inject,forwardRef } from '@angular/core';
import{ParentPage} from '../parent/parent';
@Component({
 selector: 'page-child',
 templateUrl: 'child.html',
})
export class ChildPage {
  constructor( @Host() @Inject(forwardRef(() => ParentPage)) app: ParentPage) {
    setInterval(() => {
      app.i++;
    }, 1000);
  }
}

child.html

<ion-content padding>
 child 
</ion-content>

結(jié)果：

使用Angular4怎么實現(xiàn)組件通訊

4.父獲得子實例

parent.ts

import {ViewChild, Component } from '@angular/core';
import{ChildPage}from '../child/child';

@Component({
 selector: 'page-parent',
 templateUrl: 'parent.html',
})
export class ParentPage {
 @ViewChild(ChildPage) child:ChildPage;
  ngAfterViewInit() {
    setInterval(()=> {
      this.child.i++;
    }, 1000)
  }
}

parent.html

<ion-header>
 <ion-navbar>
  <ion-title>Parent</ion-title>
 </ion-navbar>
</ion-header>

<ion-content padding>
 <h2>parent {{i}}</h2>
 <page-child></page-child>
</ion-content>

child.ts

import { Component, Input, EventEmitter, Output,Host,Inject,forwardRef } from '@angular/core';


@Component({
 selector: 'page-child',
 templateUrl: 'child.html',
})
export class ChildPage {
  i:number = 0;
}

child.html

<ion-content padding>
<h3>child {{i}}</h3>
</ion-content>

結(jié)果：

使用Angular4怎么實現(xiàn)組件通訊

5.service

parent.ts

import { Component } from '@angular/core';
import{myService}from '../child/myService'

@Component({
 selector: 'page-parent',
 templateUrl: 'parent.html',
})
export class ParentPage {

   i:number=0;

  constructor(service:myService) {
    setInterval(()=> {
      service.i++;
    }, 1000)
  }
}

parent.html

<ion-header>
 <ion-navbar>
  <ion-title>Parent</ion-title>
 </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>parent {{i}}</h2>
  <page-child></page-child>
</ion-content>

child.ts

import { Component} from '@angular/core';
import{myService}from "../child/myService"
@Component({
 selector: 'page-child',
 templateUrl: 'child.html',
})
export class ChildPage {
  constructor(public service:myService){
  }
}

child.html

<ion-content padding>
<h3>child {{service.i}}</h3>
</ion-content>

myService.ts

ps:記得在app.module.ts 加上providers: [KmyService]

import{Injectable } from '@angular/core';
@Injectable()
export class KmyService {
  i:number = 0;
}

結(jié)果：

使用Angular4怎么實現(xiàn)組件通訊

6.EventEmitter

myService.ts

import {Component,Injectable,EventEmitter} from '@angular/core';
@Injectable()
export class myService {
  change: EventEmitter<number>;

  constructor(){
    this.change = new EventEmitter();
  }
}

parent.ts

import { Component } from '@angular/core';
import{myService}from '../child/myService'

@Component({
 selector: 'page-parent',
 templateUrl: 'parent.html',
})
export class ParentPage {
  i:number = 0;
  constructor(service:myService) {
    setInterval(()=> {
      service.change.emit(++this.i);
    }, 1000)
  }
}

parent.html

<ion-header>
 <ion-navbar>
  <ion-title>Parent</ion-title>
 </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>parent {{i}}</h2>
  <page-child></page-child>
</ion-content>

child.ts

import { Component, EventEmitter} from '@angular/core';

import{myService}from "../child/myService"
@Component({
 selector: 'page-child',
 templateUrl: 'child.html',
})
export class ChildPage {

  i:number = 0;

  constructor(public service:myService){
    service.change.subscribe((value:number)=>{
      this.i = value;
    })
  }
  
}

child.html

<ion-content padding>
 <h3>child {{i}}</h3>
</ion-content>

結(jié)果：

使用Angular4怎么實現(xiàn)組件通訊

7.訂閱

parent.ts

import { Component } from '@angular/core';
import{myService}from '../child/myService'

@Component({
 selector: 'page-parent',
 templateUrl: 'parent.html',
})
export class ParentPage {
  i:number=0;
  constructor(public service:myService) {
    setInterval(()=> {
       this.service.StatusMission(this.i++);
    }, 1000)
  }
}

parent.html

<ion-header>
 <ion-navbar>
  <ion-title>Parent</ion-title>
 </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>parent</h2>
  <page-child></page-child>
</ion-content>

child.ts

import { Component, Injectable } from '@angular/core'
import { myService } from "../child/myService"
import { Subscription } from 'rxjs/Subscription';
@Component({
  selector: 'page-child',
  templateUrl: 'child.html',
})
export class ChildPage {
  i:number=0;
  subscription: Subscription;
  constructor(private Service: myService) {
    this.subscription = Service.Status$.subscribe(message => {
      this.i=message;
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

child.html

<ion-content padding>
 <h3>child {{i}}</h3> 
</ion-content>

myService.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class myService {

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

看完上述內(nèi)容，你們掌握使用Angular4怎么實現(xiàn)組件通訊的方法了嗎？如果還想學到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站標題：使用Angular4怎么實現(xiàn)組件通訊-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://www.bm7419.com/article22/dpcgjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、ChatGPT、建站公司、企業(yè)建站、移動網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容