Угловой2 атрибутивный директивный выход 'API'?

Question

Я создал атрибутивную директиву «сетка», которая находится в своем собственном модуле (GridModule). Этот модуль я импортировал в другой модуль (DashboardModule), где я хочу его использовать.

<div class="dashboard-container" 
[nosGrid]="gridSettings"> 
<div *ngFor="let tile of tiles" 
    [nosGridItem]="tile"> 
    {{tile}} 
</div> 

Теперь вызов директивы работает совершенно нормально, но я столкнулся с проблемой, когда я пытался «экспорт» в API из директивы (предоставление функциональных возможностей для блокировки сетки и т.д ....).

class DashboardComponent { 
    public tiles: Array<any> = []; 
    public gridSettings: INosGridOptions = { 
    rows: 15, 
    columns: 30 
    }; 

    constructor() { 
    // here I want to do something like this 
    // NosGridDirective.lockGrid(true) 
    } 
} 

class NosGridDirective { 
    public lockGrid(val: boolean) { 
    this._grid.lockGrid(val); 
    } 
} 

Все, что я хочу, чтобы достичь является неоспоримым в состоянии заблокировать сетку и некоторые другие вещи (набор частных переменных или вызова методов в GridDirective).

У кого-нибудь есть идея, как я могу это сделать?

Большое спасибо!

Answer 1

Если добавить exportAs как

@Directive({ 
    selector: '[nosGrid]', 
    exportAs: 'nosGrid', 
}) 
class NosGridDirective { 
    @Input() gridSettings; 

    public lockGrid(val: boolean) { 
    this._grid.lockGrid(val); 
    } 
} 

вы можете использовать его как

<div class="dashboard-container" 
    #nosGrid="nosGrid" 
    [nosGrid]="gridSettings"><button (click)="nosGrid.lockGrid(true)">click me</button>