Question

我是Angular的新手，但我遇到一个问题：我需要在ComponentB中使用ComponentA中的一个变量，所以这是下面的代码（我需要在组件“ Result”中使用“ favoriteSeason”输入结果组件A

   import { Component } from '@angular/core';
   import { FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn }
   from '@angular/forms';
   import {MatRadioModule} from '@angular/material/radio';
   import { ResultComponent } from '../result/result.component';
   import { HostBinding } from '@angular/core';

   @Component({
     selector: 'app-answer-three',
     templateUrl: './answer-three.component.html',
     styleUrls: ['./answer-three.component.css']
   })
   export class AnswerThreeComponent  {

     disableBtn: boolean;
     favoriteSeason: string;
     seasons: string[] = ['Cheesburger', 'Cheesecake', 'Fondue', 'Pizza'];
       submit() {
       this.disableBtn = !this.disableBtn;
       const result = this.favoriteSeason;
       console.log(result);
     }

   }

  <div class="co">
    <mat-radio-group class="example-radio-group" [(ngModel)]="favoriteSeason" (ngSubmit)="submit()">
      <div class="form-check">
        <h1>Choose a food:</h1>
      </div>
      <mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">
        {{season}}
      </mat-radio-button>
    </mat-radio-group>
    <div class="example-selected-value">Your favorite food is: {{favoriteSeason}}</div>
    <nav>
      <div class="column">
        <button class="btn btn-primary" [disabled]="disableBtn" name="button" (click)="submit()">save

        </button>
        <button class="btn btn-primary" [disabled]="!disableBtn" name="button" (click)="submit()">
          <a routerLink="/result">Next</a>
        </button>
      </div>
    </nav>
  </div>

我需要在组件Result中使用“ favoriteSeason”的结果组件B

   import { NgModule, Output } from '@angular/core';
   import { Component, OnInit, Input } from '@angular/core';
   import {Subject} from 'rxjs';
   import { Injectable } from '@angular/core';
   import { AnswerThreeComponent } from '../answer-three/answer-three.component';
   import { HostListener } from '@angular/core';


   @Component({
     selector: 'app-result',
     templateUrl: './result.component.html',
     styleUrls: ['./result.component.css'],
   })
   export class ResultComponent  {


   @Input () answer: AnswerThreeComponent;
   @Input () res: AnswerThreeComponent['submit'];

   @HostListener('click')
   click() {
    const result = this.answer.favoriteSeason;
    console.log(this.answer.favoriteSeason);
   }
   }

但是我收到一个错误-“找不到最喜欢的季节名称”。我做错了什么？谢谢您的帮助，如果我写错这个问题（这是我第一次），对不起。

Answer 1

Sanchit Patiyal的答案是正确的，但我想对此进行详细说明。

在组件的字段上使用@Input（）装饰器时，这意味着您现在可以在父组件的模板中设置该变量。考虑以下示例：

组件A：

@Component({
  selector: 'aComponent',
  templateUrl: './a.component.html'
})
export class AComponent {
  inputValue: string;
  //doesn't matter what you do here
}

<input [(ngModel)]="inputValue">
<bComponent [inputValue]="inputValue">
</bComponent>

组件B：

@Component({
  selector: 'bComponent',
  templateUrl: './b.component.html'
})
export class BComponent {
  @Input() inputValue: string;
  //this variable will be set by the parent component
}

<h1>{{inputValue}}</h1>

这是单向数据流的示例，这意味着数据仅流入组件B。现在，如果需要获取一些数据，您需要使用@Output（）装饰器，该装饰器使用EventEmitter将事件发给父组件。让我们介绍第三个组件cComponent：

@Component({
  selector: 'cComponent',
  templateUrl: './c.component.html'
})
export class CComponent {
  @Output() output: EventEmitter<string>;
  
  private counter: number;
  
  click() {
    this.output.next(counter++);
  }
}

<button (click)="click()">Click me!</button>

...，然后像这样编辑我们的AComponent：

@Component({
  selector: 'aComponent',
  templateUrl: './a.component.html'
})
export class AComponent {
  inputValue: string;
  
  buttonClicked(event: string) {
    this.inputValue = event;
  }
}

<cComponent (output)="buttonClicked($event)"></cComponent>
<bComponent [inputValue]="inputValue"></bComponent>

因此，回顾一下，组件的输出与其他事件（例如(click)或(focus)）一样工作，并且可用于获取组件的数据。希望这会有所帮助;）

欢迎，顺便说一句！

Answer 2

您可以为此使用RxJS BehaviorSubject。在这种情况下，我们创建一个私有的BehaviorSubject，它将保存消息的当前值，该值可以在一个组件中设置，而在另一个组件中获取。请点击此链接以获取本教程。

Sharing Data Between Angular Components

如何在另一个组件中使用一个组件的输入-Angular4

2 个答案: