Как передавать данные между двумя компонентами в одном файле .ts

Question

Я работаю с Angular 7 и застрял на подходе, однако, сначала я должен спросить, у меня есть два класса в одном файле .ts, например:

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

Я хочу перенести данные от AppComponent до AppModalComponent. Имеют ли они отношения Родителя-Ребенка или родного брата?

Я пробовал Input() & Output() методы. Но они, похоже, не работают. Последний вариант - использовать Setter и Getter через сервис (которого я пока хочу избежать). Пожалуйста, помогите в этом вопросе.

Answer 1

Каким-то образом мне удалось передать данные через parameters and services в модальный компонент, но наличие этих типов компонентов на одной странице не является подходящим способом реализации Angular. Поэтому я разбиваю AppModalComponent как отдельный компонент и импортирую его в модуль 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 { }

Это был самый простой и требуемый способ получения данных через компоненты, отсюда легко получить его.