单击按钮时将角度传递输入变量传递给另一个组件 [英] Angular pass input variable to another component on button click

问题描述

我来自Python背景，但是我开始尝试学习Angular，但确实遇到了麻烦.在组件之间工作使我感到困惑，我无法弄清楚.我举了一个很好的例子，我认为如果有人帮助我，它将对理解Angular有所帮助.

I come from a Python background, but I started trying to learn Angular and I'm really having trouble. Working between components is confusing to me and I can't figure it out. I made a good example that I think if someone helped me with it would go along way towards understanding Angular.

我只有两个组件:标题"组件和一个应用程序组件.在标题组件中，我要求输入用户名，然后他们单击一个按钮，然后在下一个组件中应显示"Hello {{name}}".至少可以说，我无法使它起作用，这确实令人沮丧. Header部分似乎可以正常工作，但它根本不与其他组件进行通信.按钮部分或名称"部分均不起作用，因此当涉及从父组件进行侦听时，我显然误解了我需要做的事情.

I just have two components: a "header" component and an app component. In the header component, I ask for the user's name and they click a button, and then it should show "Hello {{name}}" in the next component. I cannot get it to work to say the least and it's really frustrating. The Header part seems to work okay, but it's just not communicating with the other component at all. Neither the button part or the "name" part are working so I am clearly misunderstanding something I need to do when it comes to listening from the parent component.

这是我的标头HTML:

Here is my Header HTML:

Name: <input type="text" id="userInput" value="Joe">

<button (click)=showName()>Show More</button>

这是我的标题TS:

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  bodyDiv = false;
  inputName = '';
  @Output() buttonClicked = new EventEmitter();

  constructor() { }

  ngOnInit() {
  }
  showName() {
    console.log('showName clicked.');
    this.bodyDiv = true;
    this.inputName = document.getElementById('userInput').value;
    console.log(this.inputName);
    console.log(this.bodyDiv);
    this.buttonClicked.emit(this.bodyDiv);
    this.buttonClicked.emit(this.inputName);
  }
}

这是主要组件的HTML:

Here is the main Component's HTML:

<app-header (buttonClicked)='showNextComponent($event)'></app-header>

<p *ngIf="![hiddenDiv]" [inputName]="name">Hello {{ name }} </p>

这是主要组件的TS:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  hiddenComponent = true;
  title = 'show-button';

  showNextComponent() {
    console.log('Button clicked.');
    this.hiddenComponent = false;
    console.log(this.hiddenComponent);
  }
}

那么谁能告诉我我在做错什么，并帮助弄清楚Angular呢? :)谢谢！

So who can show me what I'm doing wrong and help figure out Angular a little better? :) Thank you!

推荐答案

用以下代码替换showName函数:

replace showName function with below code :

showName() {
    console.log('showName clicked.');
    this.bodyDiv = true;
    this.inputName = document.getElementById('userInput').value;
    console.log(this.inputName);
    console.log(this.bodyDiv);
    this.buttonClicked.emit(this.inputName);
  }

在您的主要组件中替换以下代码.

replace below code in your main component.

name:string
showNextComponent(value:string) {
    this.name = value;
  }

将以下代码替换为html中的代码:

replace below code in your html :

<app-header (buttonClicked)='showNextComponent($event)'></app-header>

<p *ngIf="name">Hello {{ name }} </p>

如果您有任何问题，请让我，我建议您尝试使用ngmodel或其他方法，而不是直接与DOM通信.

Please let me if you have any question and I would suggest try to use ngmodel or something else instead of directly communicating with the DOM.

这篇关于单击按钮时将角度传递输入变量传递给另一个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！