viewChild — Angular | Spec-Zone.ru

Инициализирует запрос дочернего элемента представления.

Для запросов, которые всегда должны находить соответствие, рассмотрите возможность использования viewChild.required.

API

function viewChild<LocatorT, ReadT>(locator, opts);
function viewChild<LocatorT>(locator, opts?);

function viewChild.required<LocatorT>(locator, opts?);
function viewChild.required<LocatorT, ReadT>(locator, opts);

function viewChild<LocatorT, ReadT>(locator: string | ProviderToken<LocatorT>, opts: { read: ProviderToken<ReadT>; debugName?: string | undefined; }): Signal<ReadT | undefined>;

Инициализирует запрос дочернего элемента представления. Для запросов, которые всегда должны находить соответствие, рассмотрите возможность использования viewChild.required.

@paramlocatorstring | ProviderToken<LocatorT>

@paramopts{ read: ProviderToken<ReadT>; debugName?: string | undefined; }

@returnsSignal<ReadT | undefined>

function viewChild<LocatorT>(locator: string | ProviderToken<LocatorT>, opts?: { debugName?: string | undefined; } | undefined): Signal<LocatorT | undefined>;

@paramlocatorstring | ProviderToken<LocatorT>

@paramopts{ debugName?: string | undefined; } | undefined

@returnsSignal<LocatorT | undefined>

function viewChild.required<LocatorT>(locator: string | ProviderToken<LocatorT>, opts?: { debugName?: string | undefined; } | undefined): Signal<LocatorT>;

@paramlocatorstring | ProviderToken<LocatorT>

@paramopts{ debugName?: string | undefined; } | undefined

@returnsSignal<LocatorT>

function viewChild.required<LocatorT, ReadT>(locator: string | ProviderToken<LocatorT>, opts: { read: ProviderToken<ReadT>; debugName?: string | undefined; }): Signal<ReadT>;

@paramlocatorstring | ProviderToken<LocatorT>

@paramopts{ read: ProviderToken<ReadT>; debugName?: string | undefined; }

@returnsSignal<ReadT>

Примечания по использованию

Создайте запрос дочернего элемента в компоненте, объявив поле класса и инициализировав его функцией viewChild().

@Component({template: '<div #el></div><my-component #cmp />'})
export class Card {
  divEl = viewChild<ElementRef>('el');                   // Signal<ElementRef|undefined>
  divElRequired = viewChild.required<ElementRef>('el');  // Signal<ElementRef>
  cmp = viewChild(MyComponent);                          // Signal<MyComponent|undefined>
  cmpRequired = viewChild.required(MyComponent);         // Signal<MyComponent>
}