相关疑难解决方法(0)

我是角色的新手,我有以下情况,即我有一个服务getAnswers():Observable<AnswerBase<any>[]>和两个相互关联的组件.

• 网上报价
• 动态形式

online-quote组件getAnswers():Observable<AnswerBase<any>[]>在其ngOnInit()方法中调用服务,并将其结果传递给组件dynamic-form.

为了说明这种情况,这是我的两个组件的代码:

在线quote.component.html:

 <div>
    <app-dynamic-form [answers]="(answers$ | async)"></app-dynamic-form>
</div>

在线quote.component.ts:

@Component({
  selector: 'app-online-quote',
  templateUrl: './online-quote.component.html',
  styleUrls: ['./online-quote.component.css'],
  providers:  [DynamicFormService]
})
export class OnlineQuoteComponent implements OnInit {

  public answers$: Observable<any[]>;

  constructor(private service: DynamicFormService) {

   }

  ngOnInit() {
    this.answers$=this.service.getAnswers("CAR00PR");
  }

}

动态form.component.html:

<div *ngFor="let answer of answers">
 <app-question *ngIf="actualPage===1" [answer]="answer"></app-question>
</div>

动态form.component.ts:

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css'],
  providers: [ AnswerControlService ]
})
export class DynamicFormComponent implements OnInit { …

我正在尝试将回调函数从控制器传递给指令.

这是回调函数代码:

$scope.onImageSelect = function(image) {
    alert('SET');
    $scope.card.image = image;
};

指令用法:

<google-image-search callback="onImageSelect" />

指令代码:

ngmod.directive('directive', function() {
    return {
        templateUrl: '/templates/template.html',
        scope: {
            callback: '&'
        }
    }
});

模板中的回调用法:

<a data-ng-click="callback(url)"></a>

但是,这给了我以下错误:

TypeError: Cannot use 'in' operator to search for 'onImageSelect'

我见过很多类似的问题,但无法理解我错在哪里.

在与Angular1合作几年后,我正在学习Angular2.我正在创建一个信用卡表单组件,其主要目标是学习Angular2中的几个关键概念.该组件应处理所有格式,并通过回调返回Stripe标记.我意识到我可以通过两种方式处理回调.

使用@Output参数

在我的组件中,我定义了一个输出变量,并在本例中使用它:

export class CreditCardForm{
    ....
    @Output () callback = new EventEmitter();
    ....

    doCallback(){
        this.callback.emit({data: 123});
    }
}

// Parent view
<credit-card-form (callback)="creditCardCallback($event)"></credit-card-form>

使用@Input变量

但是,我可以将回调方法(creditCardCallback在父模板中使用)传递给输入变量,如下所示:

export class CreditCardForm{
    ....
    @Input () callback;
    ....

    doCallback(){
        this.callback({data: 123});
    }
}

// Parent view
<credit-card-form [callback]="creditCardCallback"></credit-card-form>

这个问题

我为什么要@Output用完@Input？我通过使用@Output变量来实现什么？据我所知,这只是增加了必须利用这个EventEmitter类的开销.

在Angular 2+组件中,如何传入带参数的回调函数？我最初的假设是这样的

<app-example [onComplete]="doThing('someParam')"></app-example>

有时候我不需要任何参数,比如:

<app-example [onComplete]="doSomeThingElse()"></app-example>

然后在我的组件中

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  @Input() public onComplete: () => void;

  //run `this.onComplete()` somewhere as needed
}

但是,什么最终情况是,doThing('someParam')或者doSomeThingElse()是直接调用的,没有任何互动.

我应该如何将回调函数传递给稍后要调用的组件？

编辑:

我试图在这里解决的实际问题是能够在以后运行任何传入的函数.这是一个确认组件,它会询问用户"你确定要继续吗？" 然后,如果他们按下"是的我确定"按钮,传入的功能将运行.