如何在组件之间传输数据？

Question

我需要你的帮助。我有 2 个组件：header 和 sidena。我使用 material-UI 库。在 sidenav 组件中，我尝试创建一个打开的变量，负责打开 sidenav 并使用 EventEmmiter 将其传递给 header 组件，但我在 sidenav.component.html:

Type EventEmitter<boolean> is not assignable to type boolean

我有两个问题：如何在 header 组件中传递一个变量来打开 sidenav 我是否正确理解 .emit 方法为我们的 eventEmmiter？非常感谢

sidenav.component.ts

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

@Component({
  selector: 'app-sidena',
  templateUrl: './sidena.component.html',
  styleUrls: ['./sidena.component.css']
})

export class SidenaComponent implements OnInit {

@Output() opened = new EventEmitter<boolean>()

ngOnInit(): void {
  this.opened.emit(false);
 }
}

sidenav.component.html

<mat-sidenav-container>
   <mat-sidenav mode="side" [(opened)]="opened">
      Sidenav
   </mat-sidenav>
</mat-sidenav-container>

header.component.ts

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

@Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.css']
})

export class HeaderComponent implements OnInit {

@Input() opened

ngOnInit(): void {}
}

header.component.html

<header>
   <button (click)="opened=!opened">Toggle Opened</button>
   <app-sidena></app-sidena>
</header>

Answer 1

现在您正尝试在 html 中的 SidenaComponent 中使用 two-way 数据绑定：

<mat-sidenav-container>
   <mat-sidenav mode="side" [(opened)]="opened">
      Sidenav
   </mat-sidenav>
</mat-sidenav-container>

但应该是

<mat-sidenav-container>
   <mat-sidenav mode="side" (opened)="open($event)">
      Sidenav
   </mat-sidenav>
</mat-sidenav-container>

然后在 SidenaComponent 的打字稿中，您应该像这样正确地对打开的事件做出反应：

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

@Component({
  selector: 'app-sidena',
  templateUrl: './sidena.component.html',
  styleUrls: ['./sidena.component.css']
})

export class SidenaComponent implements OnInit {

@Output() opened = new EventEmitter<boolean>()

open(event): void {
  this.opened.emit(event);
 }
}

这样您就可以从 Material 组件的打开事件中获得正确的值。下一步是将此值向上发送到您的父组件：HeaderComponent。你应该这样做：

<header>
   <button (click)="opened=!opened">Toggle Opened</button>
   <app-sidena (opened)="isOpened($event)"></app-sidena>
</header>

在打字稿中：

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

@Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.css']
})

export class HeaderComponent implements OnInit {
private opened: boolean;
isOpened(event): void {
   this.opened = event;
}
}

这样您的页眉组件中就有了侧边菜单的状态。

此外，如果您需要将值从 HeaderComponent 向下传递到 SidenaComponent，只需使用 @Input 并将其向下传递。

Answer 2

另一种方法是使用存储变量的服务。然后，您可以在所有其他组件中访问这些变量。

要生成此服务：

ng generate service yourService

更多信息，请看官方文档： https://angular.io/tutorial/toh-pt4

如何在组件之间传输数据？

How to transfer data between components?

angular

eventemitter