Wie kommunizieren Angular-Komponenten? 2 Methoden für die Kommunikation zwischen Eltern-Kind-Komponenten

In diesem Artikel erfahren Sie mehr über die Komponentenkommunikation in Angular und stellen die Kommunikationsmethoden zwischen übergeordneten und untergeordneten Komponenten sowie die Kommunikation zwischen Komponenten vor, die keine direkte Beziehung haben.

In tatsächlichen Anwendungen werden unsere Komponenten in einer Baumstruktur verknüpft, sodass die Beziehung zwischen Komponenten hauptsächlich wie folgt lautet:

• Vater-Kind-Beziehung

• Bruderbeziehung

• Keine Direkte Beziehung

[Verwandte Tutorial-Empfehlung: „angular Tutorial“]

Bereiten Sie unsere Umgebung vor:

1. Erstellen Sie eine header-Komponente: ng g c Components/header<code>header组件: ng g c components/header

<app-button></app-button>
<app-title></app-title>
<app-button></app-button>

export class HeaderComponent implements OnInit {

  constructor() {}

  ngOnInit(): void {}
}

2、创建一个title组件: ng g c components/title

<span>{{title}}</span>

export class TitleComponent implements OnInit {

  public title: string = '标题';

  constructor() {}

  ngOnInit(): void {}
}

3、创建一个button组件: ng g c components/button

<button>{{ btnName }}</button>

export class ButtonComponent implements OnInit {
  public btnName: string = '按钮';

  constructor() {}

  ngOnInit(): void {}
}

直接调用

适用于父子关系组件,注意点是直接调用使得父子组件的耦合性变高,要明确使用确实需要直接调用。

1、将我们的header组件挂载到app中,使得app和header之间形成父子组件关系

2、使用#为我们的组件起一个名称: <app-header #header></app-header>

3、现在我们的header组件还很空,我们扩展一下,要不然调用什么呢?

export class HeaderComponent implements OnInit {
  public name: string = 'HeaderComponent';

  printName(): void {
    console.log('component name is', this.name);
  }
}

4、组件扩展好以后我们就可以在父组件app中调用子组件header中的属性和函数了

<app-header #header></app-header>
<p>
  调用子组件属性: {{ header.name }}
  <button (click)="header.printName()">调用子组件函数</button>
</p>

5、第4步是在父组件的html模板中进行操作,有时候我们还需要在父组件的ts类中对子组件进行操作,我们接下来接着演示。

6、我们需要用到一个新的装饰器@ViewChild(Component)

export class AppComponent {
  title = 'angular-course';

  @ViewChild(HeaderComponent)
  private header!: HeaderComponent;

	// 声明周期钩子: 组件及子组件视图更新后调用,执行一次
  ngAfterViewInit(): void {
    // 调用子组件属性
    console.log(this.header.name);
    // 调用子组件函数
    this.header.printName();
  }
}

@Input和@Output

适用于父子关系组件

1、我们通过在header组件中定义title,来解耦title组件中直接调用导致扩展复杂的问题

2、为title组件中的title属性增加@Input()装饰器: @Input() public title: string = '标题';

3、为header组件新增title属性并赋值: public title: string = '我是新标题';

4、我们再header组件的html模板中这样来使用title组件: <app-title [title]="title"></app-title>

5、一起看看到现在的效果吧,界面虽然丑,但是下次使用组件时title设置是不是方便一点呢?

6、以上步骤实现了父组件的数据传递到了子组件中,那么我们接着来看子组件的数据怎么传递到父组件中呢? 我们一起来用@Output()装饰器实现以下吧

7、在title组件的ts类中增加titleChange属性: @Output() public titleChange = new EventEmitter();

8、在title组件的ts类中定时派发数据

ngOnInit(): void {
  // 定时将子组件的数据进行派发
  setInterval(() => {
  	this.titleChange.emit(this.title);
	}, 1500);
}

9、现在我们来修改header父组件来接收派发来的数据:

<app-title 
	[title]="title" 
  (titleChange)="onChildTitleChange($event)">
</app-title>

onChildTitleChange(value: any) {
	console.log('onChildTitleChange: >>', value);
}

利用服务单利进行通信

适用于无直接关系组件

1、既然要通过服务来做通信,那我们就先创建一个服务吧: ng g s services/EventBus,并且我们声明了一个类型为Subject的属性来辅助通信

@Injectable({
  providedIn: 'root',
})
export class EventBusService {
  public eventBus: Subject<any> = new Subject();

  constructor() {}
}

2、我们为了省事就不重新创建组件了,因为我们的header中的按钮组件和title组件就符合没有直接关系的组件。

3、改造一下我们的button组件,并且添加点击事件来触发triggerEventBus函数

export class ButtonComponent implements OnInit {
  public btnName: string = '按钮';

  constructor(public eventBusService: EventBusService) {}

  ngOnInit(): void {}

  public triggerEventBus(): void {
    this.eventBusService.eventBus.next('我是按钮组件');
  }
}

4、在title

export class TitleComponent implements OnInit {

  constructor(public eventBusService: EventBusService) {}

  ngOnInit(): void {
    this.eventBusService.eventBus.subscribe((value) => {
      console.log(value);
    });
  }
}

rrreee2. Erstellen Sie eine title-Komponente: ng g c Components/title

rrreeerrreee3. Erstellen Sie eine buttonKomponente: ng g c Components/Buttonrrreeerrreee

Direkter Aufruf

🎜🎜 ist für Eltern-Kind-Beziehungskomponenten geeignet. Beachten Sie, dass der direkte Aufruf die Kopplung von Eltern-Kind-Komponenten erhöht, daher müssen Sie dies tun Verwenden Sie es eindeutig. Es muss direkt aufgerufen werden. 🎜🎜🎜1. Hängen Sie unsere Header-Komponente in die App ein, sodass eine Eltern-Kind-Komponentenbeziehung zwischen der App und dem Header entsteht. 🎜🎜2 Geben Sie unserer Komponente einen Namen: 🎜🎜3 Jetzt ist unsere Header-Komponente noch sehr leer. Wie sollen wir sie sonst nennen? Die Komponente ist gut erweitert, wir können die Eigenschaften und Funktionen im Unterkomponenten-Header in der übergeordneten Komponenten-App aufrufen. Der vierte Schritt besteht darin, in der HTML-Vorlage der übergeordneten Komponente zu arbeiten Sie müssen dies auch in der ts-Klasse der übergeordneten Komponente tun. Um die Unterkomponenten zu betreiben, werden wir als Nächstes demonstrieren. 🎜🎜6. Wir müssen einen neuen Dekorator @ViewChild(Component)🎜rrreee🎜🎜🎜@Input und @Output🎜🎜🎜🎜🎜anwendbar für Eltern-Kind-Beziehungskomponenten🎜🎜🎜1 verwenden. Wir definieren title in der header-Komponente, um das Problem der komplexen Erweiterung zu entkoppeln, die durch direkte Aufrufe in der title-Komponente verursacht wird🎜🎜2 Fügen Sie den Dekorator @Input() zum Attribut title in der Komponente >title hinzu: @Input() public title: string = 'title';🎜🎜 3. Fügen Sie der Header-Komponente ein Titelattribut hinzu und weisen Sie einen Wert zu: public title: string = 'I am the new title';🎜🎜4 Gehen wir zum htmlheader-Komponente /code>Verwenden Sie die title-Komponente in der Vorlage wie folgt: <app-title>-title></app-title>🎜🎜5. Schauen wir uns den bisherigen Effekt an. Obwohl die Benutzeroberfläche hässlich ist, wird es bei der nächsten Verwendung der Komponente bequemer sein, den title festzulegen. 🎜🎜🎜🎜6. Die obigen Schritte realisieren, dass die Daten der übergeordneten Komponente an die untergeordnete Komponente übergeben werden. Dann sehen wir uns an, wie Die Daten der untergeordneten Komponente werden an die übergeordnete Komponente übergeben. Lassen Sie uns zusammen verwenden. Der @Output()-Dekorator implementiert Folgendes: 🎜🎜7 Fügen Sie dem ts das Attribut titleChange hinzu Klasse der title-Komponente: @Output() public titleChange = new EventEmitter();🎜🎜8 Verteilen Sie Daten regelmäßig in der ts-Klasse des title Komponente🎜rrreee🎜9. Jetzt ändern wir die übergeordnete Header-Komponente, um die gesendeten Daten zu empfangen:🎜rrreeerrreee🎜🎜🎜Verwenden Sie den Service Simple Interest für die Kommunikation🎜🎜🎜🎜🎜Anwendbar auf Komponenten, die keine direkte Beziehung haben🎜🎜🎜🎜🎜 1. Da wir über Dienste kommunizieren möchten, erstellen wir zunächst einen Dienst: <code>ng g s services/EventBus, und wir deklarieren ein Attribut vom Typ Subject Auxiliary communication🎜rrreee🎜2 Um Ärger zu vermeiden, werden wir die Komponenten nicht neu erstellen, da die Schaltflächenkomponente und die Titelkomponente in unserem header sind. code> sind Komponenten, die nicht direkt miteinander verbunden sind. 🎜🎜3. Transformieren Sie unsere <code>button-Komponente und fügen Sie ein Klickereignis hinzu, um die triggerEventBus-Funktion auszulösen🎜rrreee🎜4. Simulieren Sie es in der title-Komponente Datenerfassung🎜rrreee🎜🎜🎜Verwenden Sie Cookies, Sitzungen oder lokale Speicherung zur Kommunikation🎜🎜🎜🎜🎜🎜

1. Dies ist sehr einfach. Wir verwenden weiterhin die title-Komponente zur Demonstration. Diesmal speichern wir die Daten in der title-Komponente und in Holen Sie sich Daten von der Schaltfläche-Komponente. Lassen Sie uns nur localstorage demonstrieren, alles andere ist gleich. title组件和button组件来做演示,这次我们在title组件中将数据保存,在button组件中获取数据。我们仅演示localstorage吧,其他都雷同的。

2、在title组件的ngOnInit()钩子中保存title到localstorage中: window.localStorage.setItem('title', this.title);

3、在button组件中获取数据: const title = window.localStorage.getItem('title');

2. Speichern Sie title in localstorage im ngOnInit()-Hook der title-Komponente: window.localStorage.setItem('title', this.title);

3. Daten in der Schaltflächenkomponente abrufen: const title = window.localStorage.getItem('title');

Fazit:

In diesem Artikel haben wir die Komponentenkommunikation von Angular vorgestellt, die eine angemessene Kommunikation unserer Split-Komponenten gewährleistet.

Ursprüngliche Adresse: https://juejin.cn/post/6991471300837572638

Autor: Xiaoxin

Weitere Programmierkenntnisse finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonWie kommunizieren Angular-Komponenten? 2 Methoden für die Kommunikation zwischen Eltern-Kind-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!