Problem
Als Ergebnis der Arbeit mit dem Angular-Framework zerlegen wir unsere Webanwendung. Und deshalb haben wir eine Situation, in der wir Daten zwischen Komponenten übertragen müssen.
@Input ()
Um Daten an eine untergeordnete Komponente zu übergeben, können wir einen Dekorator verwenden @Input()
. Dadurch können wir Daten von der übergeordneten Komponente an die untergeordnete Komponente übergeben. Schauen wir uns ein einfaches Beispiel an:
import { Input, Component} from '@angular/core';
@Component({
selector: 'app-child',
template: `<h1>Title: {{ title }}</h1>`
})
export class ChildComponent {
@Input() title: string;
}
In der untergeordneten Komponente haben wir die Eigenschaft "dekoriert", die wir benötigen title
. Vergessen Sie nicht, den Dekorateur zu importieren:
import { Input} from '@angular/core';
Es bleibt nur die Übergabe des Parameters title
an die untergeordnete Komponente vom übergeordneten Element:
import { Component } from '@angular/core';
@Component({
selector: 'app-component',
template: `<app-child [title]="title" [userAge]="age"></app-child>`
})
export class AppComponent {
public title = 'Hello world!';
}
[title]="title"
, title="Hello world"
. , ?
@Output()
@Output()
. , :
import { Component } from '@angular/core';
@Component({
selector: 'app-counter',
template: `<h1>Count: {{ count }}</h1>
<app-add (buttonClick)="onAdd()"></app-add>`
})
export class AppCounter {
public count = 0;
public onAdd(): void {
this.count++;
}
}
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-add',
template: `<button (click)="add()"></button>`;
})
export class AppAdd {
@Output() buttonClick = new EventEmitter();
public add(): void {
this.buttonClick.emit();
}
}
. AppAdd
click
, add()
. this.buttonClick.emit() buttonClick
AppCounter
. EventEmitter
:
import { EventEmitter } from '@angular/core';
"", . :
import { Component } from '@angular/core';
@Component({
selector: 'app-better-counter',
template: `<h1>Count: {{ count }}</h1>
<app-buttons (buttonClick)="onChange($event)"></app-buttons>`
})
export class BetterCounterComponent {
public count = 0;
public onChange(isAdd: boolean): void {
if (isAdd) {
this.count++;
} else {
this.count--;
}
}
}
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-buttons',
template: `<button (click)="change(true)"></button>
<button (click)="change(false)"></button>`
})
export class ButtonsComponent {
@Output() buttonClick = new EventEmitter<boolean>();
public change(change: boolean): void {
this.buttonClick.emit(change);
}
}
:
new EventEmitter<
boolean>()
emit
this.buttonClick.emit(change)
$event
(buttonClick)="onChange($event)"
@Input()
@Output()
, , , .., .
RxJs
. , :
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class SimpleService {
public count$ = new Subject<number>();
public changeCount(count: number) {
this.count$.next(count);
}
}
. count$
. - . Subject
. Subject
- , . , Subject
. , count
:
import { SimpleService } from './services/simple.service.ts';
@Component({
selector: 'app-any',
template: ``
})
export class AnyComponentComponent {
constructor(
private readonly simpleService: SimpleService
) {}
public setAnyCount(): void {
this.simpleService.changeCount(Math.random());
}
}
Math.random()
. :
import { Component, OnInit } from '@angular/core';
import { SimpleService } from './services/simple.service.ts';
@Component({
selector: 'app-other',
template: ``
})
export class OtherComponentComponent implements OnInit {
constructor(
private readonly simpleService: SimpleService
) {}
ngOnInit(): void {
this.simpleService.count$.subscribe((count) => this.log(count));
}
private log(data: number): void {
console.log(data);
}
}
count
, count$.next(...)
- subscribe
. - . , , . , . log()
, . - , . , count$
OnDestroy
. unsubscribe()
:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { SimpleService } from './services/simple.service.ts';
import { Subsription } from 'rxjs';
@Component({
selector: 'app-other',
template: ``
})
export class OtherComponentComponent implements OnInit, OnDestroy {
private subs: Subsription;
constructor(
private readonly simpleService: SimpleService
) {}
ngOnInit(): void {
this.subs = this.simpleService.count$.subscribe((count) => this.log(count));
}
ngOnDestroy(): void {
this.subs.unsubscribe();
}
private log(data: number): void {
console.log(data);
}
}
Wir können viele Themen aus einer Komponente abonnieren und dasselbe Thema aus verschiedenen Komponenten abonnieren.
Ergebnis
Wir können Daten zwischen den Komponenten teilen mit @Input()
, @Output()
und RxJs. In diesem Artikel habe ich weggelassen store
, da der Artikel für Anfänger gedacht ist. Ich rate Ihnen, dieses Thema zu üben, um Ihre Fähigkeiten zu verbessern.