Angular 8 使用 emit 订阅发出的事件，给出未定义 ON 方法的错误

Question

编辑

我在 main-navbar.component 整个应用程序的主菜单中，其中包含一个用于更改应用程序默认语言的下拉列表：

<form [formGroup]="langForm" role="form" *ngIf="langForm">
     <mat-form-field>
        <mat-select formControlName="selectLang" [(ngModel)]="selectedLang" (selectionChange)="OnChangeLang()">
             <mat-option value="en">English</mat-option>
             <mat-option value="ar">عربي</mat-option>
         </mat-select>
     </mat-form-field>
</form>

在 OnChangeLang() 方法中，我需要更改保存在名为 global-var.service.ts:

的服务中的应用程序的默认语言和默认值 dir

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

@Injectable({
  providedIn: 'root'
})
export class GlobarVarService {
  defaultLang:string = "en";
  defaultDir:string = "ltr";
  constructor() {
  }
}

这些变量连接到 app.component.ts 处的变量。

我需要使用 BehaviorSubject 来订阅对这些变量所做的更改，以便它直接更改我的应用程序的显示。

编辑结束

当用户更改应用程序默认语言时，我会发出以下事件：

@Output() changeLangOutput= new EventEmitter();
OnChangeLang()
{
  let lang = this.langForm.get('selectLang').value;
  console.log(lang)
  this.globalVar.defaultLang = lang;
  this.changeLangOutput.emit('changeLang', lang);

}

在 app.module.ts，我正在尝试使用以下方式订阅此更改：

@Input() subscribeLangEvent: string;

但我不知道该怎么做，因为 subscribeLangEvent.on('changeLang) 给出了 on is undefined function.

的错误

Answer 1

根据您的评论，我假设 MainNavComponent 是 AppComponent 的 child。

以下是实现此功能的方式：

在 Child 组件中，您将公开一个 @Output 属性，您将从以下位置发出值：

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

@Component({
  selector: 'app-main-nav',
  templateUrl: './main-nav.component.html',
  styleUrls: ['./main-nav.component.css']
})
export class MainNavComponent {

  @Output() changeLangOutput= new EventEmitter();

  langForm: FormGroup;
  languageOptions: Array<string> = [
    'English',
    'Hindi',
    'Spanish',
    'French',
  ];

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.langForm = this.fb.group({
      selectLang: ['English']
    });
  }

  onChangeLang() {
    let lang = this.langForm.get('selectLang').value;
    this.changeLangOutput.emit(lang);
  }

}

在 AppComponent 模板中，您将像这样收听事件：

<app-main-nav 
  (changeLangOutput)="onLanguageChange($event)">
</app-main-nav>

并在AppComponentClass中定义一个名为onLanguageChange($event)

的方法

更新：

由于您想要从所选值中获取多个内容，因此您应该使用 object 数组而不是字符串数组。

当用户选择不同的语言时，您将获得该字段的字符串值。但是你必须使用 find:

从列表中获取整个 object

...

export class MainNavComponent {

  ...

  languageOptions: Array<{ id: number; name: string, direction: string }> = [
    { id: 1, name: 'English', direction: 'ltr'},
    ...
  ];

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.langForm = this.fb.group({
      selectLang: ['English']
    });
  }

  getLanguageObject(selectedLanguage) {
    return this.languageOptions.find(language => language.name === selectedLanguage);
  }

  onChangeLang() {
    const lang = this.langForm.get('selectLang').value;
    const selectedLanguage = this.getLanguageObject(lang);
    this.changeLangOutput.emit(selectedLanguage);
  }

}

Here's an Updated Working Sample StackBlitz for your ref.

Angular 8 使用 emit 订阅发出的事件，给出未定义 ON 方法的错误

Angular 8 subscribe to an emitted event using emit giving an error of undefined ON method

eventemitter

angular

angular8

更新：