Question

我有一组下拉菜单和滑块，它们在一个组件中实现。我在另一个组件中有一个神经网络可视化。我通过服务将从几个滑块和下拉列表中获得的6个值传递给神经网络组件，因为它需要该数据来绘制神经网络。因此，我想从发送的值中进行操作，每次用户更改至少一个下拉菜单或滑块的值时，我都希望调用draw函数以使用最新的一组值绘制神经网络。如何在角度7中做到这一点？我提到了this，但这不是我所需要的。如果每个所需的下拉菜单或滑块更改其值时，我都需要触发相同的函数。

下面显示的是我的ui组件的示例，每次我想在另一个组件中调用函数时，每次进行这些更改：

<div class="list-group list-group-flush">
          <a href="#" class="list-group-item list-group-item-action bg-light">Hidden Layers<br>
              <select [(ngModel)]="hiddenlayer" (change)="selecHiddenLayers($event.target.value);">
                    <option value=0>0</option>  
                    <option value=1>1</option>
                  <option value=2>2</option>
                  <option value=3>3</option>
              </select>
          </a>
          <a *ngIf="hidden1" href="#" class="list-group-item list-group-item-action bg-light">Hidden Layer1 Nodes<br>
            <select (change)="selecHidden1Nodes($event.target.value);">
                <option value=1>0</option> 
                <option value=1>1</option>
                <option value=2>2</option>
                <option value=3>3</option>
                <option value=3>4</option>
                <option value=3>5</option>
            </select>
        </a>
        <a *ngIf="hidden2" href="#" class="list-group-item list-group-item-action bg-light">Hidden Layer2 Nodes<br>
            <select (change)="selecHidden2Nodes($event.target.value);"> 
                <option value=1>0</option> 
                <option value=1>1</option>
                <option value=2>2</option>
                <option value=3>3</option>
                <option value=3>4</option>
                <option value=3>5</option>
            </select>
        </a>
        <a *ngIf="hidden3" href="#" class="list-group-item list-group-item-action bg-light">Hidden Layer3 Nodes<br>
            <select (change)="selecHidden3Nodes($event.target.value);">  
                <option value=1>0</option> 
                <option value=1>1</option>
                <option value=2>2</option>
                <option value=3>3</option>
                <option value=3>4</option>
                <option value=3>5</option>
            </select>
        </a>

下面显示的是具有我需要调用的功能的组件。我需要调用的函数是“ draw（）”函数：

import { Component, OnInit,Input } from '@angular/core';
import {select,schemeCategory10,scaleOrdinal} from 'd3';
import { NnConfigService } from '../../services/nn-config.service';

declare var $:any;

@Component({
  selector: 'app-neuralcanvas',
  templateUrl: './neuralcanvas.component.html',
  styleUrls: ['./neuralcanvas.component.css']
})
export class NeuralcanvasComponent implements OnInit {

inputLayerHeight;
outputLayerHeight;
hiddenLayersDepths;
hiddenLayersCount;
nodeSize = 17;
width :any = 500 ;
height = 400;
hidden1Nodes;
hidden2Nodes;
hidden3Nodes;

  constructor(private nnService:NnConfigService) { }

  ngOnInit() {
    this.nnService.currenthiddenlayers.subscribe(hidden => this.hiddenLayersCount = hidden);
      this.nnService.currenthidden1Nodes.subscribe(h1 => this.hidden1Nodes =h1 );
      this.nnService.currenthidden2Nodes.subscribe(h2 => this.hidden2Nodes=h2);
      this.nnService.currenthidden3Nodes.subscribe(h3 => this.hidden3Nodes=h3);
      this.nnService.currentoutputNodes.subscribe(out => this.outputLayerHeight=out);
      this.nnService.currentnnNodes.subscribe(nn => this.inputLayerHeight = nn); 
      this.hiddenLayersDepths = [this.hidden1Nodes,this.hidden2Nodes,this.hidden3Nodes]

    this.draw()
  }



  draw() {}

}

Answer 1

从提供的受限代码来看，您似乎已经在订阅数据更改并更新组件数据。是吗？

例如：

this.nnService.currenthidden1Nodes.subscribe(h1 => this.hidden1Nodes =h1 );

如果是这样，则只需在订阅内部调用draw（）方法：

this.nnService.currenthidden1Nodes.subscribe(h1 => {this.hidden1Nodes =h1; this.draw(); } );

Answer 2

如果atual元素是组件的子组件，则可以向父组件发出事件。参见：EventEmitter

每当Angular 7中另一个组件中的一组值更改时，一个组件的调用函数

2 个答案: