Angular 8 Директивы от общего модуля не работают - PullRequest
Новая
       12

Angular 8 Директивы от общего модуля не работают

1 голос
/ 07 января 2020

Привет, ребята! Я пытаюсь создать пользовательскую директиву angular 8, но она не работает для меня, консоль браузера не показывает никаких ошибок, но я не визуализирую изменения или файлы console.logs, которые я оставил внутри кода, это это как если бы директива никогда не вызывалась. Пожалуйста, кто-нибудь, помогите мне! Большое спасибо. У меня есть это, Что я делаю не так? 

// has-permission.directive.ts

import { Directive, ElementRef, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[permission]'
})

export class HasPermissionDirective {

  constructor(private el: ElementRef) { }

  @Input() permission: string;

  OnInit() {
    console.log('this.permission->', this.permission)
    console.log('text', this.el.nativeElement.textContent += 'It is working');
    console.log('--------------------------------------------------');
  }

}

// shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HasPermissionDirective } from '../directives/has-permission.directive';  //<-- My directive

@NgModule({
  declarations: [HasPermissionDirective],  //<-- Declaring
  imports: [ ],
  exports: [
    HasPermissionDirective,  //<-- exporting
    CommonModule,
  ]
})
export class SharedModule { }

//dashboards.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ComponentsModule } from '../../components/components.module';

import { BsDropdownModule } from 'ngx-bootstrap';
import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
import { TooltipModule } from 'ngx-bootstrap/tooltip';

import { DashboardComponent } from './dashboard/dashboard.component';
import { AlternativeComponent } from './alternative/alternative.component';

import { RouterModule } from '@angular/router';
import { DashboardsRoutes } from './dashboards.routing';
import { SharedModule } from '../../shared/shared.module'; //<-- Here

@NgModule({
  declarations: [DashboardComponent, AlternativeComponent],
  imports: [
    CommonModule,
    ComponentsModule,
    BsDropdownModule.forRoot(),
    ProgressbarModule.forRoot(),
    TooltipModule.forRoot(),
    RouterModule.forChild(DashboardsRoutes),
    SharedModule,  //<-- Here
  ],
  exports: [DashboardComponent, AlternativeComponent]
})
export class DashboardsModule {}


// dashboard.component.html
<h6 [permission]="permission" class="h2 text-white d-inline-block mb-0" >Default</h6>

Пожалуйста, помогите мне !! Т_Т

1 Ответ

1 голос
/ 07 января 2020

Ваш класс должен реализовать ловушку жизненного цикла OnInit (не обязательно, но рекомендуется), и метод должен быть ngOnInit()

export class HasPermissionDirective implements OnInit {

  constructor(private el: ElementRef) { }

  ngOnInit() {
    console.log('--------------------------------------------------');
  }

}

В общем модуле, как упоминал Eliseo, вы должны импортировать только Common Модуль и не экспортировать его.

...