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

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();
  }
}

// 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');
  }
}

// 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>();
}

// 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';
}

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

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

// 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';
  }
}