如何使用 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 中，我添加了 header 组件选择器。

在此，当用户使用服务单击标题组件中的按钮时，我将值从一个组件转移到另一个组件。但我认为，这不是一种有效的方式。

谁能建议我如何提高效率或使用 Angular 8 中的输入/输出传递价值？

非常感谢任何帮助。

Answer 1

在你的组件 ts 文件中声明一个变量并添加 @Input() 让它们组件从外部接收这个变量的值

你的组件.ts import { Component, Input } from '@angular/core'; @Input() title: string;

你的主要组件 HTML（你的组件 id 使用的地方）

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

Answer 2

在您的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);
  }
}