Как передать значение из одного компонента в другой, используя ввод / вывод в Angular 8

Question

Я работаю над своим проектом Angular 8 и хочу передать значение из одного компонента в другой, когда пользователь нажимает кнопку.

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

Это мой Сервис: myservice.service.ts:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MyserviceService {
  value1: Boolean = true;
  value2: Boolean = false;

  private messageSource1 = new BehaviorSubject(this.value1);
  private messageSource2 = new BehaviorSubject(this.value2);
  currentMessage1 = this.messageSource1.asObservable();
  currentMessage2 = this.messageSource2.asObservable();

  constructor() { }

  changevalue(chvalue1: boolean, chvalue2: boolean) {
    // return this.value1 = false;
    this.messageSource1.next(chvalue1);
    this.messageSource2.next(chvalue2);
  }

}

В этом сервисеЯ добавил функцию changevalue, которая используется другими компонентами.

Это мой headcomp.component.html :

<div class="row header">
    <div class="col-md-8 no_padding">
        <div class="logo">
            <img src="./assets/images/logo.png" />
        </div>
    </div>

    <div class="col-md-4 no_padding" style="margin-top: 4px;">
        <div class="logo">
            <nav>
                <a routerLink="/loginpage" (click)="myclick2()" *ngIf="svalue1" class="mya2">Login</a>
                <a routerLink="/registerpage" (click)="myclick2()" *ngIf="svalue1" class="mya2">Register</a>
                <a [routerLink]="[{outlets: {dashboard: ['frontpage']}}]" (click)="myclick()" *ngIf="svalue1" class="mya2">Other Page</a>
                <a (click)="myclick2()" *ngIf="svalue2" class="mya2">Logout</a>
            </nav>
        </div>
    </div>
</div>

Это мойкомпонент заголовка, в который я добавил кнопки, на которых работает функция щелчка.

Это мой headcomp.component.ts :

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { MyserviceService } from '../../Service/myservice.service';

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

  svalue1: any;
  svalue2: any;
  constructor(public myapi: MyserviceService) { }

  ngOnInit() {
    this.myapi.currentMessage1.subscribe(svalue1 => this.svalue1 = svalue1);
    this.myapi.currentMessage2.subscribe(svalue2 => this.svalue2 = svalue2);
    console.log('currentMessage1', this.svalue1, this.svalue2 );
  }

  myclick() {
    this.myapi.changevalue(false, true);
    console.log('Event Clicked1', this.svalue1, this.svalue2 );
  }

  myclick2() {
    this.myapi.changevalue(true, false);
    console.log('Event Clicked2', this.svalue1, this.svalue2 );
  }

}

Это мой app.component.ts :

import { Component, OnInit, Input } from '@angular/core';
import { MyserviceService } from './Service/myservice.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // @Input() message: boolean;
  constructor(public myapi: MyserviceService) {
    // this.myapi.currentMessage1.subscribe(rsvalue1 => this.rsvalue1 = rsvalue1);
    // this.myapi.currentMessage2.subscribe(rsvalue2 => this.rsvalue2 = rsvalue2);
  }
  title = 'Batchproject1';
  rsvalue1: any;
  rsvalue2: any;

  ngOnInit() {
    this.myapi.currentMessage1.subscribe(rsvalue1 => this.rsvalue1 = rsvalue1);
    this.myapi.currentMessage2.subscribe(rsvalue2 => this.rsvalue2 = rsvalue2);
    console.log('App Component', this.rsvalue1, this.rsvalue2 );
  }

}

Это мой app.component.html:

 <div class="main_wrapper">
   <div class="container no_padding">
     <app-headcomp></app-headcomp>
   </div>
 </div>

В этом HTML ядобавлен селектор компонента заголовка.

В этом я передаю значение из одного компонента в другой, когда пользователь нажимает кнопку в компоненте заголовка с помощью службы.Но я думаю, это неэффективный способ.

Может кто-нибудь посоветовать мне, как сделать его эффективным или передать значение, используя ввод / вывод в Angular 8?

Любая помощь очень ценится.

Answer 1

В вашем HeadcompComponent вы должны установить EventEmiter в качестве вашего выхода.

export class HeadcompComponent implements OnInit {
  @Output() public myAction: EventEmitter<MyData> = new EventEmitter<
     MyData
  >();
  ...

  YOUR OTHER CODE

  ...

  myclick() {
    ...
    const data: MyData;

    this.myAction.emit(data); 
  }
}

В вашем app.component.html вы должны вызвать созданный EventEmitter-Output (Обратите внимание, что он имеет то же самоеимя: myAction).Там вы передаете обратный вызов, который является методом вашего AppComponent

 <div class="main_wrapper">
   <div class="container no_padding">
     <app-headcomp (myAction)="doSomething($event)"></app-headcomp>
   </div>
 </div>

В вашем AppComponent, doSomething() будет вызываться с получением ваших данных в качестве аргумента:

export class AppComponent {
  ...

  doSomething(data: MyData): void {
     ...
    console.log(data);
  }
}

Answer 2

в вашем компоненте ts объявите переменную и добавьте @Input(), чтобы позволить компоненту получить значение этих переменных извне

ваш component.ts import { Component, Input } from '@angular/core'; @Input() title: string;

ваш главный компонентHTML (где используется идентификатор вашего компонента)

<my-component [title]="im title"></my-component>