angular - как получить ссылку на директиву, которая не имеет exportAs - PullRequest
Новая
       53

angular - как получить ссылку на директиву, которая не имеет exportAs

1 голос
/ 15 октября 2019

clrDate - это пользовательская сторонняя директива без оператора exportAs .

исходный код 

@Directive({
  selector: '[clrDate]',
  host: {
    '[class.clr-input]': 'true',
  },
  providers: [DatepickerFocusService],
})
export class ClrDateInput extends WrappedFormControl<ClrDateContainer> implements OnInit, AfterViewInit, OnDestroy {
  @Input() placeholder: string;
  @Output('clrDateChange') dateChange: EventEmitter<Date> = new EventEmitter<Date>(false);
  @Input('clrDate')
...
}

Я хочу получить ссылку на нее отвнутри моего контроллера, а также мой customDirective. Как я могу это сделать? 

<clr-date-container customDirective>
    <label for="dateControl">Requirement Date</label>
    <input id="dateControl" type="date" [placeholder]="'TT.MM.YYYY'" [(clrDate)]="item.requirementDate" (clrDateChange)="onChange($event)" [ngModel]="null" name="requirementDate"/>
    <clr-control-error>{{ 'FORMS.VALIDATION.DATE_INVALID' | translate }}</clr-control-error>
</clr-date-container>

Ответы [ 2 ]

5 голосов
/ 15 октября 2019

Добавьте #ref (переменная шаблона) в директиву, и вы можете получить ее в компоненте

0 голосов
/ 15 октября 2019

В зависимости от того, откуда вы хотите получить доступ к экземпляру директивы, вы должны иметь возможность получить его с помощью @ViewChild или инжектора конструктора.

Из вашего контроллера (компонента) или из вашего customDirective вы должныбыть в состоянии сделать следующее: 

  // will be available in ngOnInit
  @ViewChild(ClrDateInput, { static: true })
  clrDateDirective: ClrDateInput;

при условии, что вы можете иметь несколько директив ClrDateInput, которые вы можете использовать @ViewChildren: 

  // will be available in ngAfterViewInit
  @ViewChildren(ClrDateInput)
  clrDateDirectives: QueryList<ClrDateInput>;

из основного элемента самой директивы вы можетевведите директиву с помощью инжектора конструктора: 

// app.component.html
<custom-app ctrlDate></custom-app>

// custom-app.component.ts
@Component({
  selector: "custom-app",
  template: `
    <h2>Custom App</h2>
  `
})
class CustomAppComponent {
    constructor(@Self() private ClrDateInput: ClrDateInput) {}

Вы можете взглянуть на пример песочница .

...