Analyse de la communication des composants angulaires

Cet article présente principalement l'analyse de la communication des composants angulaires, qui a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

La communication des composants d'application d'une seule page contient les points suivants : Cet article parle principalement de la communication angulaire

1. Composant parent => Composant enfant

2. Composant enfant = > Composant parent

3. Composant A = > Composant B

父组件 => 子组件	子组件 => 父组件	sibling  => sibling
@input	@output
setters (本质上还是@input)	注入父组件
ngOnChanges() (不推荐使用)
局部变量
@ViewChild()
service	service	service
Rxjs的Observalbe	Rxjs的Observalbe	Rxjs的Observalbe
localStorage,sessionStorage	localStorage,sessionStorage	localStorage,sessionStorage

Le tableau ci-dessus résume les solutions de communication qui peuvent être utilisées. Les trois dernières de la période sont universelles et peuvent être utilisées parmi les composants angulaires Parmi eux, Rxjs est l'utilisation la plus puissante, abandonnant la promesse de redux. sont également basés sur la gestion de l'état fonctionnel , parlons-en un par un

Composant parent => Composant enfant

@input, la méthode la plus couramment utilisée

@Component({
  selector: 'app-parent',
template: '<p>childText:<app-child></app-child></p>',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  varString: string;
  constructor() { }
  ngOnInit() {
    this.varString = '从父组件传过来的' ;
  }
}

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-child',
  template: '<h1 id="textContent">{{textContent}}</h1>',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Input() public textContent: string ;
  constructor() { }
  ngOnInit() {
  }
}

setter

Setter consiste à intercepter l'attribut @input, car lorsque nous communiquons avec des composants, nous avons souvent besoin de traiter les attributs d'entrée, nous avons donc souvent besoin de setters et de getters. utilisé ensemble. Modifiez légèrement le child.component.ts
child.component.ts

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-child',
  template: '<h1 id="textContent">{{textContent}}</h1>',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
_textContent:string;
  @Input()
  set textContent(text: string){
   this._textContent = !text: "啥都没有给我" ? text ;
  } ;
  get textContent(){
  return this._textContent;
  }
  constructor() { }
  ngOnInit() {
  }
}

onChange

Ceci est détecté via le hook de cycle de vie angulaire. à utiliser. Si vous souhaitez l'utiliser, vous pouvez vous référer à la documentation angulaire

@ViewChild()

@ViewChild() est généralement utilisé pour appeler des méthodes non privées de sous-composants.

           import {Component, OnInit, ViewChild} from '@angular/core';
       import {ViewChildChildComponent} from "../view-child-child/view-child-child.component";
    @Component({
      selector: 'app-parent',
      templateUrl: './parent.component.html',
      styleUrls: ['./parent.component.css']
    })
    export class ParentComponent implements OnInit {
      varString: string;
      @ViewChild(ViewChildChildComponent)
      viewChildChildComponent: ViewChildChildComponent;
      constructor() { }
      ngOnInit() {
        this.varString = '从父组件传过来的' ;
      }
      clickEvent(clickEvent: any) {
        console.log(clickEvent);
        this.viewChildChildComponent.myName(clickEvent.value);
      }
    }

      import { Component, OnInit } from '@angular/core';
    @Component({
      selector: 'app-view-child-child',
      templateUrl: './view-child-child.component.html',
      styleUrls: ['./view-child-child.component.css']
    })
    export class ViewChildChildComponent implements OnInit {
      constructor() { }
      name: string;
      myName(name: string) {
          console.log(name);
          this.name = name ;
      }
      ngOnInit() {
      }
    }

Variables locales

Les variables locales sont similaires à viewChild et ne peuvent être utilisées que dans les modèles HTML. Modifiez parent.component.html et utilisez la variable #viewChild pour représenter. le sous-composant, et vous pouvez appeler la méthode du sous-composant.

<p>
    <input>
    <button>局部变量传值</button>
    <app-view-child-child></app-view-child-child>
            </p>

le composant enfant est le suivant

@Component({
  selector: 'app-view-child-child',
  templateUrl: './view-child-child.component.html',
  styleUrls: ['./view-child-child.component.css']
})
export class ViewChildChildComponent implements OnInit {

  constructor() { }
  name: string;
  myName(name: string) {
      console.log(name);
      this.name = name ;
  }
  ngOnInit() {
  }

}

composant parent enfant

@output()

la sortie est une commune L'essence de la communication est de transmettre un function au composant enfant Après avoir exécuté certaines méthodes dans le composant enfant, exécutez le rappel passé function et transmettez le. valeur au composant parent

parent.component.ts
@Component({
  selector: 'app-child-to-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ChildToParentComponent implements OnInit {

  childName: string;
  childNameForInject: string;
  constructor( ) { }
  ngOnInit() {
  }
  showChildName(name: string) {
    this.childName = name;
  }
}

parent.component.html

<p>
  </p><p>output方式 childText:{{childName}}</p>
  <br>
  <app-output-child></app-output-child>

  child.component.ts
  export class OutputChildComponent implements OnInit {
  // 传入的回调事件
  @Output() public childNameEventEmitter: EventEmitter<any> = new EventEmitter();
  constructor() { }
  ngOnInit() {
  }
  showMyName(value) {
    //这里就执行,父组件传入的函数
    this.childNameEventEmitter.emit(value);
  }
}</any>

Injecter le composant parent

La raison de ce principe est que l'essentiel le cycle de vie des composants parent et enfant est le même

export class OutputChildComponent implements OnInit {
  // 注入父组件
  constructor(private childToParentComponent: ChildToParentComponent) { }
  ngOnInit() {
  }
  showMyName(value) {
    this.childToParentComponent.childNameForInject = value;
  }
}

composant frère=> composant frère

service

Rxjs

communique via le service

Le service en angulaire est un singleton, il existe donc trois types de communication. Tout peut être fait via le service. De nombreux frontaux ne comprennent pas très clairement les singletons. L'essence est
. un module, tous les composants de ce module peuvent obtenir les attributs et méthodes de ce service. Ils sont partagés, donc le service de journalisation et le service d'interception http sont souvent injectés dans app.moudule.ts. ne peut être partagé que par ce sous-module. Le service injecté dans le composant ne peut être partagé que par le sous-composant. Ce qui suit utilise le service injecté dans app.module.ts pour démontrer la communication

user.service.ts
@Injectable()
export class UserService {
  age: number;
  userName: string;
  constructor() { }
}
app.module.ts
@NgModule({
  declarations: [
    AppComponent,
    SiblingAComponent,
    SiblingBComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }
SiblingBComponent.ts
@Component({
  selector: 'app-sibling-b',
  templateUrl: './sibling-b.component.html',
  styleUrls: ['./sibling-b.component.css']
})
export class SiblingBComponent implements OnInit {
  constructor(private userService: UserService) {
    this.userService.userName = "王二";
  }
  ngOnInit() {
  }
}
SiblingAComponent.ts
@Component({
  selector: 'app-sibling-a',
  templateUrl: './sibling-a.component.html',
  styleUrls: ['./sibling-a.component.css']
})
export class SiblingAComponent implements OnInit {
  userName: string;
  constructor(private userService: UserService) {
  }
  ngOnInit() {
    this.userName = this.userService.userName;
  }
}

. via Rx.js

C'est le plus génial, ce genre de traitement de fichiers en streaming basé sur la publication par abonnement, une fois abonné, la source de publication change, l'abonné peut obtenir le changement ce n'est pas facile à comprendre, l'explication simple est que b.js, c.js, d.js s'abonnent à une certaine valeur dans a.js Change, b.js, c.js et d.js obtiennent immédiatement le changement, mais pas a.js appelez activement les méthodes dans b.js, c.js et d.js. Pour donner un exemple simple, lorsque chaque page gère une requête ajax, il y aura un message d'invite contextuel. Généralement, je mettrai une boîte d'invite. composant dans le modèle du composant
. C'est très fastidieux et chaque composant doit le faire une fois. S'il est basé sur Rx .js, vous pouvez mettre ce composant d'invite dans app.component.ts, puis app.component. .ts s'abonne au service public, ce qui est plus simple. Le code est le suivant
Créez d'abord un album.service.ts

import {Injectable} from "@angular/core";
import {Subject} from "rxjs/Subject";
@Injectable()
export class AlertService {
  private messageSu = new Subject<string>();  //
  messageObserve = this.messageSu.asObservable();
  private  setMessage(message: string) {
    this.messageSu.next(message);
  }
  public success(message: string, callback?: Function) {
    this.setMessage(message);
    callback();
  }
}</string>

sibling-a.component.ts

@Component({
  selector: 'app-sibling-a',
  templateUrl: './sibling-a.component.html',
  styleUrls: ['./sibling-a.component.css']
})
export class SiblingAComponent implements OnInit {
  userName: string;
  constructor(private userService: UserService, private alertService: AlertService) {
  }
  ngOnInit() {
    this.userName = this.userService.userName;
    // 改变alertService的信息源
    this.alertService.success("初始化成功");
  }
}

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  message: string;
  constructor(private alertService: AlertService) {
    //订阅alertServcie的message服务
     this.alertService.messageObserve.subscribe((res: any) => {
      this.message = res;
    });
  }
}

De cette façon, les abonnés peuvent suivre dynamiquement les modifications dans la source de publication

Résumé : les méthodes de communication ci-dessus sont couramment utilisées. Différentes méthodes peuvent être adoptées. dans divers scénarios

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de tout le monde. Plus Veuillez faire attention au site Web PHP chinois pour le contenu connexe.

Recommandations associées :

Explication de la syntaxe du modèle angulaire

Comment utiliser le composant Angular-UI Bootstrap pour implémenter des alertes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!