[英]How to use the input of one component in another - Angular4
I'm a new in Angular and I have a problem: I need to use one variable from ComponentA in ComponentB So this is my code below (I need to use "favoriteSeason" input result in component "Result" Component A 我是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>
And I need to use the result of "favoriteSeason" in component Result Component B 我需要在组件结果组件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); } }
But i received an error - "can't find favoriteSeason name". 但我收到一个错误-“找不到喜欢的季节名称”。 What I do wrong? 我做错了什么? Thank you for any help and sorry if I wrote this question wrong (it's my first time) 谢谢您的帮助,如果我写错了这个问题,对不起(这是我第一次)
Sanchit Patiyal's answer is correct, but I would like to elaborate on that. Sanchit Patiyal的答案是正确的,但我想对此进行详细说明。
When you use the @Input() decorator on a component's field, that means that you now can set that variable in a parent component's template. 在组件的字段上使用@Input()装饰器时,这意味着您现在可以在父组件的模板中设置该变量。 Consider the following example: 考虑以下示例:
Component A: 成分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>
Component B: 成分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>
This is an example of one-way data flow, meaning that the data only flows into the component B. Now if you need to get some data out of the component, you need to use @Output() decorator, which uses an EventEmitter to emit events out to the parent component when something happens. 这是一个单向数据流的一个例子,这意味着只有流入部分B.现在,如果你需要得到一些数据从组件的数据,你需要使用@Output()装饰,它使用一个EventEmitter来发生事件时将事件发送到父组件。 Let's introduce the third component, cComponent
: 让我们介绍第三个组件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>
...and then edit our AComponent like this: ...然后像这样编辑我们的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>
So, to recap, the component's output works just like other events (say (click)
or (focus)
), and can be used to get the data out of the component. 因此,总而言之,组件的输出与其他事件(例如(click)
或(focus)
)一样工作,并且可以用于从组件中获取数据。 HOpe this helps ;) 希望这可以帮助 ;)
Welcome, by the way! 欢迎,顺便说一句!
You can use RxJS BehaviorSubject
for this. 您可以为此使用RxJS BehaviorSubject
。 In this case we create a private BehaviorSubject that will hold the current value of the message which can be set in one component and get in other one. 在这种情况下,我们创建一个私有的BehaviorSubject,它将保存消息的当前值,该值可以在一个组件中设置,而在另一个组件中获取。 Follow this link for the tutorial. 请点击此链接以获取本教程。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.