Question

我正在尝试选择框值我需要使用Injectable将子组件发送到Grand parent组件当我更改select选项时依赖于值需要加载主题配置方法

<select  (change)="changedvalue($event)"  class="selectionbox" [(ngModel)]="selectedValue" required>
            <option value="1">red</option>
            <option value="2">blue</option>
            <option value="3">green</option>
            <option value="4">Teaching</option>
            <option value="5">Marketing</option>
        </select>

changedvalue(key){
      console.log(this.selectedValue);
      this.formeService.testdata(this.selectedValue);
    }

FormeService.ts

import {Injectable, Component, Directive, EventEmitter, Output} from '@angular/core';
  @Injectable()
  export class FormeService {
    @Output() change = new EventEmitter<any>();
    testdata(value) {
      this.change.emit(value)
    }

Grand parent component.ts

  ngOnInit(): void {
    this.formeService.change.subscribe((value)=> {
      console.log(value);
      if (value === 1) {
        this.themeConfig.config();
      } else if (value === 2) {
        this.themeConfig.config2();
      }
    });
  }

Answer 1

以下是有关如何跟踪所选更改的示例，您可能甚至不需要使用服务：How can I get new selection in "select" in Angular 2?

所以在你的例子中，你必须这样做：

    <select (change)="changedvalue($event.target.value)" class="selectionbox" [(ngModel)]="selectedValue" required>
  <option value="1">red</option>
  <option value="2">blue</option>
  <option value="3">green</option>
  <option value="4">Teaching</option>
  <option value="5">Marketing</option>
</select>

changedvalue(value){
      if (value === 1) {
    this.themeConfig.config();
  } else if (value === 2) {
    this.themeConfig.config2();
  }
    }

PS：不要忘记在模块中从@ angular / forms导入FormsModule，如下所示：

import { FormsModule } from '@angular/forms';

并将其添加到模块的导入列表中：

@NgModule({
  imports: [
    FormsModule,
    // etc...

如何在分量角2中发射值并接收值？

1 个答案: