Angular:如何与app-component (app-root)共享自定义组件中的数据_Angular中从父组件到子组件的数据共享_与Angular中另一个模块的组件共享数据 - 腾讯云开发者社区

Angular:如何与app-component (app-root)共享自定义组件中的数据

在Angular中，与AppComponent（通常命名为app-root）共享自定义组件中的数据可以通过多种方式实现，以下是一些常见的方法：

1. 使用服务（Service）

服务是Angular中共享数据和逻辑的推荐方式。你可以创建一个服务来存储数据，并在需要的组件中注入这个服务。

创建服务

ng generate service data

在服务中定义数据

// data.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private data: any;

  constructor() { }

  setData(data: any) {
    this.data = data;
  }

  getData() {
    return this.data;
  }
}

在自定义组件中使用服务

// custom.component.ts
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-custom',
  template: `<p>{{ data }}</p>`
})
export class CustomComponent {
  data: any;

  constructor(private dataService: DataService) {
    this.data = dataService.getData();
  }
}

在`AppComponent`中使用服务

// app.component.ts
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `<app-custom></app-custom>`
})
export class AppComponent {
  constructor(private dataService: DataService) {
    dataService.setData('Hello from AppComponent');
  }
}

2. 使用`@Input()`和`@Output()`

如果你只需要在父子组件之间共享数据，可以使用@Input()和@Output()装饰器。

在自定义组件中定义输入和输出

// custom.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-custom',
  template: `<p>{{ data }}</p>`
})
export class CustomComponent {
  @Input() data: any;
  @Output() dataChange = new EventEmitter<any>();
}

在`AppComponent`中使用自定义组件

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<app-custom [data]="data" (dataChange)="data = $event"></app-custom>`
})
export class AppComponent {
  data = 'Hello from AppComponent';
}

3. 使用`@ViewChild()`

如果你需要在AppComponent中访问自定义组件的实例，可以使用@ViewChild()装饰器。

在自定义组件中定义数据

// custom.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-custom',
  template: `<p>{{ data }}</p>`
})
export class CustomComponent {
  data: any;
}

在`AppComponent`中访问自定义组件

// app.component.ts
import { Component, ViewChild } from '@angular/core';
import { CustomComponent } from './custom.component';

@Component({
  selector: 'app-root',
  template: `<app-custom #customComponent></app-custom>`
})
export class AppComponent {
  @ViewChild('customComponent') customComponent: CustomComponent;

  ngAfterViewInit() {
    this.customComponent.data = 'Hello from AppComponent';
  }
}