gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 17:41:07 26 4
gpt4 key购买 nike

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

我只有两个组件:一个“header”组件和一个应用程序组件。在 header 组件中,我要求输入用户名,然后他们单击一个按钮,然后它应该在下一个组件中显示“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? :) 谢谢!

最佳答案

用以下代码替换 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 通信。

关于javascript - 单击按钮时 Angular 将输入变量传递给另一个组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53127724/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com