Question

我知道能够使用我的指令的唯一方法是将其导出到模块中。

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [BreadcrumbsComponent, IsRightDirective],
  exports: [BreadcrumbsComponent, IsRightDirective]
})
export class BreadcrumbsModule { }

My BreadcrumbsModule由我的AppModule

导入

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BreadcrumbsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在，当我使用我将其命名为选择器bulma-breadcrumbs的breadcrumbs组件并添加属性is-right时，它按预期工作。但是，如果我将它添加到另一个标记，例如h1，该指令也会影响它。

我试图让指令仅适用于BreadcrumbsComponent。

Answer 1

在Angular 2 RC5之前，指令/组件的层次结构是透明的，因为组件具有directives属性，该属性定义了仅影响该组件及其子组件的组件/指令。

引入NgModule后，此功能保持不变，但不太明显。如this answer中所述，可以使用适当的模块层次结构。

模块declarations和exports大多数时候都相同，这允许在应用程序中全局使用模块指令，组件和管道。

如果某个单元未从模块导出，则只能在本地使用，而是可用于同一模块内的其他单元。

此

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [BreadcrumbsComponent, IsRightDirective],
  exports: [BreadcrumbsComponent]
})
export class BreadcrumbsModule { }

将阻止is-right属性指令在任何地方编译，但是此模块声明（即BreadcrumbsComponent）。

或者，指令selector可以限制为bulma-breadcrumbs[is-right]。结果将是相同的，但这不会阻止该指令在具有其本地bulma-breadcrumbs组件的其他模块中使用。

Answer 2

只有当元素tagName为bulma-breadcrumbs时才能使指令生效：

export class IsRightDirective {

  constructor(private elementRef: ElementRef) {
    let element = elementRef.nativeElement as HTMLElement;
    if (element.tagName.toLowerCase() === "bulma-breadcrumbs") {
      element.style.border = "solid 4px red";
      ...
    }
  }

}

有关代码的实际示例，请参阅 this stackblitz 。

如何使Angular指令仅由一个组件使用？

2 个答案: