單擊按鈕時將角度傳遞輸入變量傳遞給另一個組件

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

在頭部件的事件發射器發射其是名稱（字符串） $event在showNextComponent($event) 。 您必須在主要組件中捕獲它，並將其分配給本地變量，然后才能在主要組件的模板中以{{name}}使用它

[inputName]="name"不正確。 您可以將這樣的值傳遞給角度組件，而不傳遞給實際的HTML 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>

主要成分

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將更新您的預期結果

這就是我認為應該可以正常工作的全部-嘗試一下並讓我知道-謝謝快樂編碼！

不要忘了查看上面的鏈接，在這里您可以看到許多類型的組件交互