如何在另一個組件中使用一個組件的輸入-Angular4

Question

我是Angular的新手，但有一個問題：我需要在ComponentB中使用ComponentA中的一個變量，所以這是我的以下代碼（我需要在組件“ Result”中使用“ favoriteSeason”輸入結果Component 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> 

我需要在組件結果組件B中使用“ favoriteSeason”的結果

  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，它將保存消息的當前值，該值可以在一個組件中設置，而在另一個組件中獲取。 請點擊此鏈接以獲取本教程。

在角度組件之間共享數據