方法,该方法使用数据的检索,从观察到的关于其自己的成分返回不确定的时用作输入()

0

的问题

我创建了一个模板, example.component.html 这接收到一个方法作为一个变量,它的点击行动:

<div>
  <button (click)="method()">click here</button>
</div>

example.component.ts 文件方法,该方法涉及从一个输入(),因此我可以使用这个模板,在多种情况:

@Component({
  selector: 'example',
  templateUrl: './example.component.html',
})
    export class ExampleComponent implements OnInit {
      @Input() method;
    
      constructor() {}
    
      ngOnInit(): void {}
    }

这里是哪里变得复杂。 在父母分的方法,该方法将被触发点击使用的变量来自一个可观察到的:

parent-example.component.html

  <example [method]="onClick"></example>

parent-example.component.ts

@Component({
  selector: 'parent-example',
  templateUrl: './parent-example.component.html',
})
export class ParentExampleComponent implements OnInit {
  @Input() method;
  business;

  constructor(businessEntityService: BusinessEntityService) {
    businessEntityService.entities$.subscribe(
      data => (this.business = data),
    );
  }

  onClick() {
    console.log(this.business);
  }

  ngOnInit(): void {}
}

即使父母组件订阅 businessEntityService 可观察到的,我已经检查已经在事实数据,当我按一下按钮,控制台的记录 undefined.

我明白这很可能与范围和堆正在寻找 this.business 在儿童组成的,但是我很想知道,如果有的无论如何称呼一个方法,该方法使用的可变从一个订阅自己的组件作为输入().

angular rxjs typescript
2021-11-24 03:00:01
1

最好的答案

2

this 下文是正在失去了(我认为)。 可能发生在经过类方法作为params

替换 ParentExampleComponent#onClick 方法:

onClick = () => {
    console.log(this.business);
}

注: 在幕后,打字稿现在将享 onClick 作为一类财产,并移动代码进入的构造。 使用一个箭头功能锁定 this 背景下,功能

2021-11-24 07:10:18

其他语言

此页面有其他语言版本

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................