Angular 5 Custom Local директива видна, моя глобальная пользовательская директива не - PullRequest
Новая
       33

Angular 5 Custom Local директива видна, моя глобальная пользовательская директива не

0 голосов
/ 25 мая 2018

Это первая и вторая директивы, которые я когда-либо написал.(извините) Базовая структура CLI.

HomePageModule имеет компонент домашней страницы плюс MyFirst.directive.ts, и на него хорошо ссылается home-page.component.html.

MySecond.directive.ts почти идентичен, нона уровне app.component.app.module.ts содержит свое объявление, но home-page.component.html НЕ МОЖЕТ ссылаться на него.

AppModule 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {HomePageModule} from './home-page/home-page.module';
import {MySecondDirective} from './MySecond.directive';  <<=====


@NgModule({
  declarations: [
    AppComponent,
    MySecondDirective  <<=====
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HomePageModule
  ],
  providers: [],
  exports: [MySecondDirective],   <<=====
  bootstrap: [AppComponent]
})
export class AppModule { }

Модуль домашней страницы 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomePageComponent } from './home-page/home-page.component';
import {MyFirstDirective} from './home-page/MyFirst.directive'; <<<=====

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    HomePageComponent,
    MyFirstDirective    <<<=====
  ],
  exports: [
    HomePageComponent,
    MyFirstDirective    <<<=====
  ]
})
export class HomePageModule { }

HomeСтраница HTML 

<p>
  home-page works!
</p>
<div>
  <h1 myfirst>TESTING</h1>
  <h3 mysecond>Again</h3>
</div>

Вывод программы enter image description here

Структура программы enter image description here

MyFirstDirective: 

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

@Directive({
  selector: '[myfirst]'
})
export class MyFirstDirective {

  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
    const nativeElement = elementRef.nativeElement;
    this.renderer.setStyle( nativeElement, 'color', 'red');
    this.renderer.setStyle( nativeElement, 'background-color', 'yellow');
    this.renderer.setStyle( nativeElement, 'border', '1px solid green');
  }
}

MySecondDirective: 

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

@Directive({
  selector: '[mysecond]'
})
export class MySecondDirective {

  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
    const nativeElement = elementRef.nativeElement;
    this.renderer.setStyle( nativeElement, 'color', 'green');
    this.renderer.setStyle( nativeElement, 'background-color', 'orange');
    this.renderer.setStyle( nativeElement, 'border', '2px solid red');
  }
}

Заранее спасибо!Чак

1 Ответ

0 голосов
/ 25 мая 2018

Угловые модули не являются иерархическими.

Регистрация вашей директивы в корневом модуле AppModule говорит Angular только о том, что AppModule использует объявленную директиву.Вам все равно нужно будет импортировать его в любой модуль, в котором вы хотите использовать директиву.

Как правило, не рекомендуется экспортировать что-либо из корневого модуля AppModule, поскольку вы не будете импортировать корневой модуль в любой другой модуль.modules.

Если вы хотите, чтобы ваши компоненты / директивы использовались в нескольких модулях вашего приложения, создайте SharedModule, экспортируйте компоненты / директивы оттуда и импортируйте его в любой модуль, который их использует.

Самое большое заблуждение относительно импортированных модулей заключается в том, что разработчики думают, что они создают иерархию.И, вероятно, разумно предположить, что модуль, который импортирует другие модули, становится родительским модулем для его импорта.Однако этого не происходит.Все модули объединяются на этапе компиляции.И поэтому нет никакой иерархической связи между импортируемым модулем и импортирующим модулем.

из Угловая глубина

...