Question

我正在使用angular 4，我无法与component通信。我有sidenav component，我想将值侧边栏共享给main component。谢谢。

Answer 1

sidenav.component.ts
passData:any

sidenav.component.html
//Call your main component & share passData property
<app-component [passData]="passData"></app-component>

main.component.ts
@ViewChild(passData) passData: SidenavComponent;

Answer 2

有很多方法。例如：

- @Output/@Input
- Service

实际上，Angular文档中甚至有一整节专门介绍了该内容：

https://angular.io/guide/component-interaction

Answer 3

您可以创建服务并将其添加到应用程序级别（根）的提供程序中，从而可以将该服务注入所有组件，并且对该服务的任何更改都将保留。

@Injectable()
export class GlobalSharedService {
  public data:any;
}

app.module

@NgModule({
  ....
  providers: [GlobalSharedService]
})
export class AppModule { }

在Angular 6中，您可以像这样将服务添加到app.module级别的providers上

@Injectable({
  providedIn: 'root',
})
export class GlobalSharedService {
   public data:any;
  }

在app.module上添加的所有服务均创建一次，以说明为什么会持续存在，并称为 singleton服务

如何在两个组件之间共享数据？

3 个答案: