如何使用 Angular 中的 input/output 将值从一个组件转移到另一个组件 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>

这是我的 header 组件，我在其中添加了点击功能起作用的按钮。

这是我的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 组件选择器。

在此，当用户使用该服务单击 header 组件中的按钮时，我将值从一个组件传输到另一个组件。但我认为，这不是一个有效的方法。

谁能建议我如何提高效率或使用 Angular 8 中的 input/output 转移价值？

非常感谢任何帮助。

Answer 1

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

你的component.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);
  }
}

如何使用 Angular 中的 input/output 将值从一个组件转移到另一个组件 8

How to transfer value from one component to another using input/output in Angular 8

typescript

angular

angular8