代码之家 › 专栏 › 技术社区 › Emac

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

angular html javascript

1

Emac · 技术社区 · 7 年前

我有Python的背景,但我开始尝试学习Angular,我真的遇到了麻烦。在组件之间工作让我很困惑,我想不通。我举了一个很好的例子,我认为如果有人帮助我,我会朝着理解角度的方向前进。

我只有两个组件:一个“header”组件和一个app组件。在header组件中,我询问用户名,他们单击一个按钮,然后在下一个组件中显示“Hello{{name}”。我不能让它工作,至少可以说,这真的令人沮丧。头部分似乎工作正常,但它只是没有与其他组件进行通信。按钮部分和“name”部分都不起作用,所以当涉及到从父组件侦听时,我显然误解了我需要做的事情。

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

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

这是我的标题:

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

那么谁能告诉我我做错了什么,帮助我更好地理解呢?:)非常感谢。

3 回复 | 直到 7 年前

1

2

Ajay Ojha 7 年前

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

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

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

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

2

zer0 7 年前

https://stackblitz.com/edit/angular-jhhctr

头组件中的事件发射器发出名称(字符串),它是 $event 在里面 showNextComponent($event) . 您必须在主组件中捕获它,并将其分配给一个局部变量,以便能够在主组件的模板中使用它 {{name}}

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

3

1

Rahul 7 年前

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

<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' 因此,无论您在输入文本中输入什么,它都将在您的

[hidden] 属性将为false,当我们通过 输入名称 对于子组件,它将被更新

bindName 将更新,并将有结果你的期望

这就是我认为这应该工作得很好-试试这个,让我知道-谢谢快乐的编码!!

别忘了查看上面的链接,在这里您可以看到许多类型的组件交互