这些是我曾写过的第一个和第二个指令。 (对不起)基本的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 { }
首页HTML
<p>
home-page works!
</p>
<div>
<h1 myfirst>TESTING</h1>
<h3 mysecond>Again</h3>
</div>
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');
}
}
提前致谢!卡盘
答案 0 :(得分:1)
Angular模块不是分层的。
在根AppModule中注册您的指令只会告诉Angular AppModule使用声明的指令。您仍然需要将其导入到您想要使用该指令的模块中。
通常,建议不要从根AppModule导出任何内容,因为您不会将根模块导入任何其他模块。
如果您希望在应用程序的多个模块中使用组件/指令,请创建一个SharedModule,从那里导出组件/指令并将其导入任何使用它们的模块中。
关于导入模块的最大困惑是开发人员认为他们构建了一个层次结构。假设导入其他模块的模块成为其导入的父模块,这可能是合理的。然而,事情并非如此。在编译阶段合并所有模块。因此,导入的模块与导入的模块之间没有层次关系。