[Angular] @ViewChild read custom directive and exportAs
Angular and Read Custom directive
2023-09-14 09:00:49 时间
For example we have a component:
<Card ></Card>
And a driective:
<Card highlighted></Card>
We want to get the driective instant inside the component code, we can use @ViewChild:
@ViewChild(CardComponennt, {read: HighlightedDirective}) highlighted: HighlightedDirective
Then we can access the instant in ngAfterViewInited lifecycle hook.
-----
Another way to access driective is inside component template. we need to use 'exportAs' from the directive:
@Directive({ name: 'highlighted', exportAs: 'hl' })
...
toggle () {...}
Inside the template, we can get it from the template reference:
<Card highlighted #hlref="hl"></Card> <button (click)="hlref.toggle()"></button>
相关文章
- [Angular 8] Calculate and Measure Performance budgets with the Angular CLI
- [Angular] Remove divs to Preserve Style and Layout with ng-container in Angular
- [Angular] New async 'as' syntax and ngIf.. else
- [Angular] AuthService and AngularFire integration
- [Angular] Create custom validators for formControl and formGroup
- [Angular] Create dynamic content with <tempalte>
- [Angular 2] Understanding @Injectable
- [Angular 2] Factory Provider
- [Angular 2] Using Pipes to Filter Data
- 使用Angular和Nodejs搭建聊天室
- [Angular 8 Unit Testing] Testing a dump component
- [Angular] Angular ngSwitch Core Directive In Detail
- [Angular] Remove divs to Preserve Style and Layout with ng-container in Angular
- [Angular] Create a ng-true-value and ng-false-value in Angular by controlValueAccessor
- [Angular] AuthService and AngularFire integration
- [Angular] FadeIn and FadeOut animation in Angular
- [Angular] The Select DOM Event and Enabling Text Copy
- [Angular] Bind async requests in your Angular template with the async pipe and the "as" keyword
- [Angular2 Animation] Use Keyframes for Fine-Tuned Angular 2 Animations
- [Angular 2] Move and Delete Angular 2 Components After Creation
- [Angular 2] Router basic and Router Params
- [Angular 2]ng-class and Encapsulated Component Style2
- [Angular 2] The form export from NgFormControl
- [Angular 2] Template property syntax
- [AngularJS] Using the Angular scope $destroy event and method
- [Angular] In angular world and out angular world
- Angular Universal 应用避免 SSR hang 的一些指导方针
- SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试
- 什么是 Angular Ngrx Store 里的 Meta-Reducer
- fragment in UI5 Smart Template and directive in Angular