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

这是一个经过稍微修改且可以正常使用的示例：https://stackblitz.com/edit/angular-jhhctr

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

的形式使用它

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

Answer 2

用以下代码替换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 3

有多种方式可以从一个组件到另一个组件进行角度通信-在子组件中使用@Input()会期望父组件的输入，而子组件@Output()会从子组件

因此，在您的情况下，如果您希望将值从父级传递给子级，则需要在子级属性上使用输入属性或装饰器-我将为您提供代码，但只要通过链接提供适当的指导即可，您创建更好的角度应用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，它将显示，并且当我们通过{ {1}}将会更新到子组件

最后，将显示子组件，并在子组件中更新文本中输入的内容-当子组件html显示inputName时，将得到更新，并且会产生预期的结果

仅此而已，我认为这应该很好-尝试一下并让我知道-谢谢您编码愉快！！

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

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

3 个答案: