Angular中的@Output裝飾器是否嚴格只與點擊事件一起作業？

我正在嘗試將資料從子組件傳遞到父組件，并將變數值從子組件傳遞到父組件，不幸的是，父組件沒有進行任何更改。有什么想法嗎？還是 @Output 裝飾器嚴格只適用于來自子組件點擊的事件？我還明確指出，我是否使用 eventemitter 方法并不重要，因此例如從內部建構式或 ngOnInit 方法為 eventemitter 設定 emit，我試過了但仍然不起作用。

子組件：

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

@Component({
selector: 'app-server',
templateUrl: './server.component.html',
styles: [
 `.online {
   color: white;
}


 `
]
})
export class ServerComponent {
serverId: number = 10;
serverStatus: string = 'offline';
serverName: 'Random server';

@Output() serverNameEmitter = new EventEmitter<string>();

constructor() {
    this.serverStatus = Math.random() > 0.5 ? 'online' : 'offline';

}

ngOnInit(): void {
    this.passServerName(this.serverName);
}

passServerName(serverName: string) {
    this.serverNameEmitter.emit(serverName);
}


getColor() {
    return this.serverStatus == 'online' ? 'green' : 'red';
}
getServerStatus() {
    return this.serverStatus;
}


}

父組件

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

@Component({
  selector: 'app-servers',
  templateUrl: './servers.component.html',
  styleUrls: ['./servers.component.css'],
})
export class ServersComponent implements OnInit {
allowNewServer = false;
serverCreationStatus = 'No server was created!';
serverNames = "";
serverStatus = false;
servers = [];

serverName = {
   name: "Test server"
};


constructor() {
  setTimeout(() => {
    this.allowNewServer = true;
  }, 2000);
}

ngOnInit(): void {}

onCreateServer() {
 this.serverStatus = true;
 this.servers.push(this.serverName.name);
 this.serverCreationStatus = 'Server has been created! Name is '   this.serverName.name;
}

onUpdateServerName(event: Event) {
 this.serverNames = (event.target as HTMLInputElement).value;
}

changeServerName() {
 this.serverName.name = this.serverNames;
}

gettingServerName(serverName: string) {
  this.serverNames = serverName;
}
}

父組件 HTML

<label>Server Name</label>
<input type="text"  (input)="onUpdateServerName($event)">
<!--<input type="text"  [(ngModel)]="serverName.name">-->
<!--<p>{{serverName}}</p>-->
 <button  [disabled]="!allowNewServer" 
(click)="onCreateServer()">Add Server</button>
<!--<p [innerText]="allowNewServer"></p>-->
<!--<p>{{serverCreationStatus}}</p>-->
<p>Here's {{ serverNames }}</p>
<p *ngIf="serverStatus; else noServer">Server was created, server name is {{ 
   serverName.name }}</p>
<ng-template #noServer>
<p>No server was created!</p>
</ng-template>
<button  (click)="changeServerName()">Change server name</button>
<app-server *ngFor="let server of servers" 
(serverNameEmitter)="gettingServerName($event)"></app-server>

uj5u.com熱心網友回復：

好的，我已經用你的代碼創建了一個 Stackblitz 專案。但我不明白什么……你在父組件中設定了一個新的服務器名稱。然后你可以添加一個新的服務器。但是如果它創建了，你永遠不會為孩子設定名字。所以孩子發出事件（有效）并且您始終將 serverNames 設定為“隨機服務器”。

我唯一看到的是：如果您在 onInit() 中的子項中發出 serverName，則會出現ExpressionChangedAfterItHasBeenCheckedError 。簡單的技巧：setTimeout。

但是請查看Stackblitz并使用它。如果您有其他問題，請告訴我。

問候，弗洛

uj5u.com熱心網友回復：

您可以在每次gettingServerName()呼叫時手動觸發更改檢測。這樣就可以避免Flo提到的ExpressionChangedAfterItHasBeenCheckedError。無需使用超時。

只需匯入ChangeDetectorRef：

  import { ChangeDetectorRef } from '@angular/core';

通過建構式注入它，然后在方法detectChanges()末尾呼叫gettingServerName()：

  constructor(private cdRef: ChangeDetectorRef) {}

  gettingServerName(serverName: string) {
    this.serverNames = serverName;
    this.cdRef.detectChanges();
  }

盡管我想補充一點：您并沒有真正@Output按照預期的方式使用它。

標籤：有角度的打字稿前端成分角度装饰器

上一篇：如何使用角度服務將計數值傳遞給組件？

下一篇：如何使用CSS類來設定元素的樣式？