Javascript 如何从子组件调用父函数_Javascript_Angular_Typescript

Javascript 如何从子组件调用父函数

javascript angular typescript

Javascript 如何从子组件调用父函数,javascript,angular,typescript,Javascript,Angular,Typescript,我正在尝试从嵌套在标记中的子组件调用父组件。在我的例子中，我尝试调用timer.start函数来启动父组件中的计时器我通过导入到子对象成功地调用了父对象的函数，但计时器不工作。我尝试记录指示计时器是否正在运行的标志，它已经处于真实状态代码如下： import { NavbarComponent } from './../navbar/navbar.component'; /* This is the parent component */ import { Component, OnInit

我正在尝试从嵌套在标记中的子组件调用父组件。在我的例子中，我尝试调用timer.start函数来启动父组件中的计时器

我通过导入到子对象成功地调用了父对象的函数，但计时器不工作。我尝试记录指示计时器是否正在运行的标志，它已经处于真实状态

代码如下：

import { NavbarComponent } from './../navbar/navbar.component'; /* This is the parent component */
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-css-inoculation-scoring',
    templateUrl: './css-inoculation-scoring.component.html',
    styleUrls: ['./css-inoculation-scoring.component.scss'],
    providers: [ NavbarComponent ]
})

export class CSSInoculationScoringComponent implements OnInit {
    constructor(private _service: DataModelService, private _navbar: NavbarComponent) {}

    ngOnInit() {
        this.vessel.getVessel();
        this._navbar.timer.start();
    }
}

这是timer.start函数：

start: () => {
    this.timer.isTicking = true;
    this.timer.startTime();
}

startTime: () => {
    if (this.timer.isTicking) {
      let hour = parseInt(this.timer.hour, 10);
      let minute = parseInt(this.timer.minute, 10);
      let second = parseInt(this.timer.second, 10);

      second += 1;

      if (second > 60) {
        minute += 1;
        second = 0;
      }

      if (minute > 60) {
        hour += 1;
        minute = 0;
      }

      this.timer.second = second < 10 ? `0${second}` : `${second}`;
      this.timer.minute = minute < 10 ? `0${minute}` : `${minute}`;
      this.timer.hour = hour < 10 ? `0${hour}` : `${hour}`;

      setTimeout(this.timer.startTime, 1000);
    }
  }

timer.start函数也称为另一个函数，这里是timer.startTimer函数：

start: () => {
    this.timer.isTicking = true;
    this.timer.startTime();
}

startTime: () => {
    if (this.timer.isTicking) {
      let hour = parseInt(this.timer.hour, 10);
      let minute = parseInt(this.timer.minute, 10);
      let second = parseInt(this.timer.second, 10);

      second += 1;

      if (second > 60) {
        minute += 1;
        second = 0;
      }

      if (minute > 60) {
        hour += 1;
        minute = 0;
      }

      this.timer.second = second < 10 ? `0${second}` : `${second}`;
      this.timer.minute = minute < 10 ? `0${minute}` : `${minute}`;
      this.timer.hour = hour < 10 ? `0${hour}` : `${hour}`;

      setTimeout(this.timer.startTime, 1000);
    }
  }

我想通过服务来改变数据的值，并返回可观察的数据。我有另一个类似的案例，它的工作。但是在timer.startTime函数中也修改了timer的属性。我也应该为此使用服务吗？或者还有其他方法吗？

我假设您希望使用父上下文调用父方法。我建议避免将组件作为服务传递，因为如果有需要共享的功能，它应该是服务。但是，如果子级需要在父级上下文中触发父级的方法，那么您可以将其传递给子级并从那里调用if

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

@Component({
  selector: 'app-css-inoculation-scoring',
  templateUrl: './css-inoculation-scoring.component.html',
  styleUrls: ['./css-inoculation-scoring.component.scss'],
})

export class CSSInoculationScoringComponent implements OnInit {
  @Output() startTimer: EventEmitter<any> = new EventEmitter();

  constructor(private _service: DataModelService)

  ngOnInit() {
    this.vessel.getVessel();
    this.startTimer.emit();
  }
}

// PARENT COMPONENT TEMPLATE
<targeting
  (startTimer)="timer.start()">
</targeting>

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

@Component({
  selector: 'app-css-inoculation-scoring',
  templateUrl: './css-inoculation-scoring.component.html',
  styleUrls: ['./css-inoculation-scoring.component.scss'],
})

export class CSSInoculationScoringComponent implements OnInit {
  @Output() startTimer: EventEmitter<any> = new EventEmitter();

  constructor(private _service: DataModelService)

  ngOnInit() {
    this.vessel.getVessel();
    this.startTimer.emit();
  }
}

// PARENT COMPONENT TEMPLATE
<targeting
  (startTimer)="timer.start()">
</targeting>

子组件无法直接调用其父组件上的函数。按照上面的例子使用EventEmitter是最接近它的。但是，如果您的子组件在路由模块中声明为子路由，那么您现在将无法通过绑定事件发射器的方式来执行此操作

我建议将计时器逻辑移动到一个共享服务中，该服务可以注入到这两个组件中。这样，您可以让任一组件在需要时调用启动函数

如果您通过模块仅提供一次此服务，以单例方式提供此服务，则您将能够通过您的标记跟踪计时器是否正在运行

我建议将计时器逻辑移动到一个共享服务中，该服务可以注入到这两个组件中。这样，您可以让任一组件在需要时调用启动函数

如果您通过模块仅提供一次此服务，以单例方式提供此服务，则您将能够通过您的标记跟踪计时器是否正在运行

[angular]相关文章推荐

随机文章推荐