单击按钮时将输入变量角传递给另一个组件

Question

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

我只有两个组件：一个“标题”组件和一个应用程序组件。在标题组件中，我询问用户的姓名，然后他们单击一个按钮，然后它应该在下一个组件中显示“Hello {{name}}”。至少可以说我无法让它工作，这真的很令人沮丧。 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：

<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？ :) 谢谢！

Answer 1

用下面的代码替换 showName 函数：

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);
  }

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

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

在您的 html 中替换以下代码：

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

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

如果您有任何问题，请告诉我，我建议您尝试使用 ngmodel 或其他东西，而不是直接与 DOM 通信。

Answer 2

这是一个稍作修改的工作示例：https://stackblitz.com/edit/angular-jhhctr

标题组件中的事件发射器发出名称（字符串），即showNextComponent($event) 中的$event。您必须在主组件中捕获它并将其分配给局部变量，以便能够在主组件的模板中将其用作{{name}}

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

Answer 3

有几种方法可以通过角度从一个组件到另一个组件进行通信 - 在您的子组件中使用 @Input() 将需要来自父组件的输入，而来自子组件的 @Output() 将从子组件发出一个事件

因此，在您的情况下，如果您想将值从父级传递给子级，则需要在子级属性上使用输入属性或装饰器 - 我将为您提供代码，但只需通过链接中的适当指导进行操作即可您可以创建更好的 Angular 应用程序https://angular.io/guide/component-interaction

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

标题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>

标题组件

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;
      }
    }

主要组件Html

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

主要组件 ts

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

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

}

在您的标头组件中，inputName 属性将使用两种数据绑定方式进行绑定，而我使用的是[(ngModel)]='inputName'，因此无论您在输入文本中输入什么，它都会在您的inputName 属性中更新

现在我们只需要做一件事就可以向您的子组件显示任何事件 - 因此，当单击按钮时，具有[hidden] 属性的 div 将为 false，并且当我们传递 inputName 时它会显示出来到子组件它将被更新

最后会显示子组件，并在子组件中更新写入文本的输入 - 当子组件 html 显示时，bindName 将被更新，并且会出现您预期的结果

这就是我认为应该可以正常工作的全部内容 - 试试这个并告诉我 - 谢谢快乐编码！

不要忘记查看上面的链接，您可以在其中看到许多类型的组件交互