Question

此问题与语法匿名/箭头功能/ add-hoc /工厂DP功能有关：我有一个嵌入在HTML中的组件。该组件具有一个单击事件，该事件绑定到一个函数。该功能内容取决于引用该组件的另一个组件。这是带有click事件的组件： HTML：

<div  (click)="doSomething()">Content.....</div> \\ Should it be with a brackets ?

在组件中，我只想定义函数签名：

@Component({
 selector: 'app-embedded'
})
export class className 
{
  constructor() { }
  ngOnInit() {   }
  doSomething:(booleanparams: boolean) => any; //The function get a boolean parameter as input and return void or any
}

现在这是组件的嵌入位置：

<div >
    <app-embedded #emb></app-embedded>
</div>

这是嵌入式组件容器的组件，它具有对嵌入式组件的引用：

@Component({
 selector: 'app-container',
})
export class container
{
   @ViewChild('emb') private emb: ElementRef;
   booleanParam : booelan;
   constructor()
   {
      emb.doSomething = containerFunction(true);
   }

   containerFunction(booleanParam : boolean)
   { 
       // do something in this context
   }
}

这个想法是，这个嵌入式组件被嵌入到许多其他容器中，并且只要click事件触发了在doSomething函数变量中设置的函数，就应该执行。

要完成此操作，我需要对代码进行哪些更改？

Answer 1

我看到的最好的方法是简单地使用事件发射器并在另一侧捕获事件？因此嵌入式将具有以下内容：

@Component({
 selector: 'app-embedded'
})
export class className 
{

  @Output()
  public something: EventEmitter<boolean> = new EventEmitter<boolean>();

  constructor() { }
  ngOnInit() {   }
  doSomething:(booleanparams: boolean) {
    this.something.emit(booleanparams);
  }; //The function get a boolean parameter as input and return void or any
}

然后将其称为：

<div >
    <app-embedded #emb (something)="doSomething($event)"></app-embedded>
</div>

允许退货的其他解决方案

@Component({
 selector: 'app-embedded'
})
export class className 
{

  @Input()
  public somethingFunc: (boolean)=>any;

  constructor() { }
  ngOnInit() {   }
  doSomething:(booleanparams: boolean) {
    let w_potato = this.somethingFunc(booleanparams); 
    //Do whatever you want with w_potato
  }; //The function get a boolean parameter as input and return void or any
}

在这种情况下，视图将是

<div >
    <app-embedded #emb [somethingFunc]="doSomething"></app-embedded>
</div>

我希望这会有所帮助！与尝试修改组件实例相比，传递函数或发出事件的角度要大得多。最重要的是，当Angular启动时，构造函数仅被调用一次，因此此时#emb不会被定义为任何东西。如果要这样做，则必须将自己绑定在ngAfterViewInit中。但是再次，我认为将其传递给属性将更具角度。

祝您好运，如果这不适合您的答案，请告诉我。

功能变量动态设置

1 个答案: