Как запустить функцию после того, как компонент стал видимым в Angular 8? - PullRequest
Новая
       33

Как запустить функцию после того, как компонент стал видимым в Angular 8?

0 голосов
/ 13 января 2020

Я хочу загружать данные, только если пользователь видит указанный c компонент, который загружает данные. Поэтому не загружайте, пока компонент не виден.

У меня есть этот шаблон: 

<button (click)="showMyCompontente()">Click me</button>
<app-other-component *ngIf="show"></app-other-component>

С этим кодом TypeScript: 

export class MyComponent implements OnInit {
  show = false;

  ngOnInit() {
  }

  showMyCompontente() {
    this.show = !this.show;
  }
}

И дело здесь : 

@Component({
  selector: 'app-other-component',
})
export class OtherComponent implements OnInit {

  ngOnInit() {
    this.load();
  }

  load() {
    // needs to load datas only if the user see the component
  }
}

Как добиться в OtherComponent запуска this.load(), только если компонент виден пользователю? Я хочу перезагрузить данные снова, если пользователь скрывает компонент и показывает его обратно.

Мне нужно решение внутри компонента, чтобы обнаружение себя стало видимым или исчезло. Это потому, что у меня много компонентов, вызывающих друг друга во многих вариациях.

Какие Angular ловушки жизненного цикла срабатывают только тогда, когда пользователь показывает компонент?

1 Ответ

0 голосов
/ 13 января 2020

Я бы попробовал:

  • Добавление свойства ввода с типом логического значения для OtherComponent компонента.
  • Передав значение show в свойство ввода, затем внутри компонента OtherComponent, используйте ngOnChanges, чтобы обнаружить любое изменение в свойстве ввода, и соответственно вызовите load().
...