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()方法中，我需要更改保存在名为dir的服务中的应用的默认语言和默认global-var.service.ts：

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

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

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

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

END EDIT

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

@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的子代。

以下是实现该功能的方法：

在子组件中，您将公开一个@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>

然后在AppComponent类中，定义一个名为onLanguageChange($event)

的方法。

更新：

由于要从选定的值中获取多个内容，因此应该有一个对象数组而不是字符串数组。

当用户选择其他语言时，您将以字符串形式获取字段的值。但是随后您必须使用find从列表中获取整个对象：

...

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

}

以下是更新的Working Sample StackBlitz供您参考。

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

1 个答案:

更新：