如何在同一个 .ts 文件中的两个组件之间传输数据

Question

I am working with Angular 7 and stuck on an approach, However, I gotta ask first, I have two classes on a same .ts file like so:

import { Component } from '@angular/core';

@Component({
   selector: 'app-component',
   template: 'app.component.html',
   styleUrls: ['./app-component.css']
})
export class AppComponent{
   instruction:any;
   constructor() { }
}

@Component({
   selector: 'app-modal-component',
   template: 'app-modal.component.html'
})
export class AppModalComponent{
   constructor() { }
}

I want to transfer data from AppComponent to AppModalComponent . Are they having Parent-Child relation or sibling relation?

I had tried Input() & Output() methods. But they do not seem to be working. The final option would be to use Setter and Getter through service(which I want to avoid for now.). Kindly assist in the matter.

Answer 1

Somehow I managed to transfer data through parameters and services to modal component, But having these types of components on a same page is not an appropriate way to implement Angular. So i break apart AppModalComponent as a saperate component and import it into the module of AppComponent

app.component.ts

import { Component } from '@angular/core';

@Component({
   selector: 'app-component',
   template: 'app.component.html',
   styleUrls: ['./app-component.css']
})
export class AppComponent{
   instruction:any;
   constructor() { }
}

app-modal.component.ts

import { Component } from '@angular/core';

@Component({
   selector: 'app-modal-component',
   template: 'app-modal.component.html'
})
export class AppModalComponent{
   constructor() { }
}

app.module.ts

import { AppModalComponent } from '../path-to-import-app-modal.component';

@NgModule({
  declarations: [
    ...,
    ...,
    AppModalComponent
  ],
  imports: [],
  exports:[],
  providers: []
})

export class AppModule { }

This was the easiest and required way to get data through components, it only gets easy from here.