Javascript 单击按钮时，将输入变量传递到另一个组件

我有Python的背景，但我开始尝试学习Angular，我真的遇到了麻烦。在组件之间工作让我感到困惑，我无法理解。我举了一个很好的例子，我认为如果有人帮助我，这将有助于理解我

我只有两个组件：一个“标题”组件和一个应用程序组件。在header组件中，我询问用户名，他们单击一个按钮，然后在下一个组件中显示“Hello{{name}”。至少可以说，我无法让它发挥作用，这真的令人沮丧。标题部分似乎工作正常，但它根本无法与其他组件通信。按钮部分和“名称”部分都不起作用，所以当涉及到从父组件监听时，我显然误解了我需要做的事情

以下是我的标题HTML：

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

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

以下是主要组件的HTML：

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

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

---

那么，谁能告诉我我做错了什么，并帮助我更好地解决问题呢谢谢大家!

这是一个稍加修改的工作示例：

标头组件中的事件发射器发出名称（字符串），该名称是

showNextComponent（$event）

中的

$event

。您必须在主组件中捕获它，并将其分配给局部变量，以便能够在主组件的模板中使用它，如

{{name}

---

[inputName]=“name”

不正确。您可以将类似的值传递给角度组件，而不是实际的HTML DOM元素。

用以下代码替换showName函数：

showName（）{
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）；
}

有两种方法可以从一个组件到另一个组件进行角度通信-在子组件中使用

@Input（）

将期望来自父组件的输入，而来自子组件的

@Output（）

将从子组件发出事件

因此，在您的情况下，如果您想将值从父级传递给子级，您需要在子级属性上使用input属性或decorator-我将向您提供代码，但只需通过链接提供的适当指导，这将使您创建更好的角度应用程序

首先你需要交换你的组件你的头组件应该是你的父组件，子组件将是你的主组件-如果你想以同样的方式工作，只需移动你的代码，反之亦然

标题html

    Name: <input type="text" id="userInput" name='userInput' [(ngModel)]='inputName' value="Joe">

    <button (click)=showName()>Show More</button>
    <div [hidden]='bodyDiv'>
      <app-header [bindName]='inputName'></app-header>
    </div>

主组件Html

<p>Hello {{ bindName }} </p>

在标题组件中，

inputName

属性将使用双向数据绑定进行绑定，其中我使用了

[（ngModel）]='inputName'

，因此无论您在输入文本中输入什么，都将在

inputName

属性中进行更新

现在，我们只需要做一件事，就可以用任何事件显示您的子组件-因此，当单击按钮时，带有

[hidden]

属性的div将为false，并且将显示它，当我们将

inputName

传递给子组件时，它将被更新

最后，子组件将被显示，文本中写入的输入将在子组件中更新-当子组件html显示时，

bindName

将被更新，并将产生您期望的结果

这就是所有我认为这应该很好的工作-尝试这个，让我知道-谢谢快乐编码

---

不要忘了查看上面的链接，在那里您可以看到多种类型的组件交互

谢谢您的回复。这很有帮助。我很好奇为什么要交换父组件和子组件？也许我被这些概念弄糊涂了，但“主要”组件难道不是父组件，并在“头”上监听吗组件？是的，您可以在相同的代码中执行，这不是问题-似乎您正在尝试将数据从子组件传递到父组件，并且您询问如何将数据从父组件传递到子组件-这让我以将数据从父组件传递到子组件的方式进行了回答-很抱歉造成了许多混乱-使用

@Input（）

用于父对象到子对象-使用

@Output

用于子对象到父对象的事件发射器谢谢。我在你的帮助下成功了，现在一切都有了意义。

    Name: <input type="text" id="userInput" name='userInput' [(ngModel)]='inputName' value="Joe">

    <button (click)=showName()>Show More</button>
    <div [hidden]='bodyDiv'>
      <app-header [bindName]='inputName'></app-header>
    </div>

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 = true;
      inputName = '';


      constructor() { }

      ngOnInit() {
      }
      showName() {
        bodyDiv = false;
      }
    }

<p>Hello {{ bindName }} </p>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @Input()
  bindName: string;

}