在Angular中的组件之间共享数据:我们总是需要观察值吗？

// 父组件
@Component({
  selector: 'app-parent',
  template: `<app-child [childMessage]="parentMessage" (messageEvent)="receiveMessage($event)"></app-child>`
})
export class ParentComponent {
  parentMessage = "message from parent";
  receiveMessage($event) {
    console.log($event);
  }
}

// 子组件
@Component({
  selector: 'app-child',
  template: `<button (click)="sendMessage()">Send Message</button>`
})
export class ChildComponent {
  @Input() childMessage: string;
  @Output() messageEvent = new EventEmitter<string>();

  sendMessage() {
    this.messageEvent.emit("message from child");
  }
}

@Injectable({ providedIn: 'root' })
export class DataService {
  private data = new BehaviorSubject<string>('initial value');
  currentData$ = this.data.asObservable();

  changeData(message: string) {
    this.data.next(message);
  }
}

// 在组件中使用
@Component({ ... })
export class SomeComponent implements OnInit {
  currentData: string;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.currentData$.subscribe(data => this.currentData = data);
  }
}

// store/actions.ts
export const updateData = createAction('[Data] Update Data', props<{ data: string }>());

// store/reducer.ts
export function reducer(state: State, action: Action) {
  switch (action.type) {
    case '[Data] Update Data':
      return { ...state, data: action.payload.data };
    default:
      return state;
  }
}

// 在组件中
@Component({ ... })
export class SomeComponent {
  data$ = this.store.select(selectData);

  constructor(private store: Store) {}
}