Angular 6 обмен данными между компонентами в компоненте шаблона через сервис

Question

Итак, у меня есть 2 разных компонента и 1 компонент шаблона. Я хотел бы передать компонент шаблона в 2 других компонента (я просто положил в html выход маршрутизатора два раза). Но .. 2 компонент имеет переменную uniq. как это: component_type = "region", component_type = "request". Я пытаюсь обмениваться данными между службой, и она тоже работает, но общие данные всегда одинаковы. Поэтому я хотел бы связать свойство uniq двух компонентов в компоненте шаблона. Проблема на этом рисунке.

Итак, я хочу, чтобы первое значение было первым идентификатором uniq, второе - вторым идентификатором uniq.

Спасибо. Мой service.ts:

@Injectable()

export class ObjectTemplateService {

  selectedRequest: string;

  private objectType$: BehaviorSubject<string> = new BehaviorSubject<string>('Default ntype');


  constructor(private http: Http,
              ) { }

  public setRequestTypeProperty(newrequestType: string): void {
    this.objectType$.next(newrequestType);
  }

  public getObjectType(): Observable<string> {
    return this.objectType$.asObservable();
  }

}

Мой шаблон component.ts:

@Component({
  selector: 'app-object-template',
  templateUrl: './object-template.component.html',
  styleUrls: ['./object-template.component.scss']
})
export class ObjectTemplateComponent implements OnInit {

  objectdata = REQUEST_DATA
  selectedRequest: string;
  selectedReq: RequestModel;

  public objectType: string;

  private getobjectTypeSubscription: Subscription;

  constructor(public objectTemplateService: ObjectTemplateService) { }

  ngOnInit() {
    this.getobjectTypeSubscription = this.objectTemplateService.getObjectType()
      .subscribe((objectType: string) => {
        console.log('Object Template get these =>' + objectType)
        return this.objectType = objectType;

      });
  }

  onSelect(req: RequestModel): void {
    this.selectedReq = req;
  }

  getRequestType(request: RequestModel): void {
    this.objectTemplateService.getRequestType(request);
    this.selectedRequest = request.object_id
    this.objectTemplateService.changeMessage(request.object_id.toString())
    this.onSelect(request)
  }
}

Мой шаблонный компонент. html

Type: {{objectType}}

Первый компонент.ts:

@Component({
  selector: 'app-company',
  templateUrl: './company.component.html',
  styleUrls: ['./company.component.css']
})
export class CompanyComponent implements OnInit {

  public object_type: string = 'company';

  constructor(public objectTemplateService: ObjectTemplateService) { }

  ngOnInit() {
   this.objectTemplateService.setRequestTypeProperty(this.object_type);
  }

}

Первый компонент. html

<app-object-template></app-object-template>

Второй компонент.ts

@Component({
  selector: 'app-requests',
  templateUrl: './requests.component.html',
  styleUrls: ['./requests.component.css']
})
export class RequestsComponent implements OnInit {

  public object_type: string = 'request';

  constructor( public objectTemplateService: ObjectTemplateService) { }

  ngOnInit() {
    this.objectTemplateService.setRequestTypeProperty(this.object_type);
  }
}

Второй компонент. html

<app-object-template></app-object-template>

Answer 1

Поскольку сервисы совместно используются всем приложением, изменение его из компонента автоматически изменяет его в другом. Если вы хотите поделиться общим шаблоном и кодом, вы можете расширить базовый компонент:

abstract-object-template.component.ts

@Component({
  selector: 'app-abstract-object-template',
  templateUrl: './abstract-object-template.component.html',
  styleUrls: ['./abstract-object-template.component.scss']
})
export class AbstractObjectTemplateComponent {

  objectdata = REQUEST_DATA
  selectedRequest: string;
  selectedReq: RequestModel;

  public objectType: string;

  constructor(objectType: string) {
    this.objectType = objectType;
  }

  onSelect(req: RequestModel): void {
    this.selectedReq = req;
  }

  getRequestType(request: RequestModel): void {
    this.objectTemplateService.getRequestType(request);
    this.selectedRequest = request.object_id
    this.objectTemplateService.changeMessage(request.object_id.toString())
    this.onSelect(request)
  }
}

company.component.ts

@Component({
  selector: 'app-company',
  templateUrl: 'path/to/abstract-object-template.component.html',
  styleUrls: ['path/to/abstract-object-template.component.scss']
})
export class CompanyComponent extends AbstractObjectTemplateComponent {

  constructor() {
    super('company');
  }

}

запросы.component.ts

@Component({
  selector: 'app-requests',
  templateUrl: 'path/to/abstract-object-template.component.html',
  styleUrls: ['path/to/abstract-object-template.component.scss']
})
export class RequestsComponent extends AbstractObjectTemplateComponent {

  constructor() {
    super('request');
  }

}

плюс без дополнительных html и s css файлы требуются для компонентов "компания" и "запрос".

Answer 2

Похоже, оно напоминает свое предыдущее значение:

Реализует метод OnDestroy в ваших RequestsComponent и CompanyComponent и добавляет сбросить ваш сервис следующим образом при уничтожении компонента:

          ngOnDestroy(): void {
            this.objectTemplateService.setRequestTypeProperty(null);
          }

Примерно так:

            @Component({
              selector: 'app-requests',
              templateUrl: './requests.component.html',
              styleUrls: ['./requests.component.css']
            })
            export class RequestsComponent implements OnInit, OnDestroy {

              public object_type: string = 'request';

              constructor( public objectTemplateService: ObjectTemplateService) { }

              ngOnInit() {
                this.objectTemplateService.setRequestTypeProperty(this.object_type);
              }


                ngOnDestroy(): void {
                    this.objectTemplateService.setRequestTypeProperty(null);
                }


            }

Наконец, ObjectTemplateComponent отписался от службы:

              ngOnDestroy(): void {
                this.subscription.unsubscribe();
              }