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

Posted 2023-02-22

【中文标题】如何使 Angular 指令只能由一个组件使用？

【英文标题】：How do I make an Angular directive usable only by one component?

【发布时间】：2018-08-23 12:46:18

【问题描述】：

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

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

我的 BreadcrumbsModule 是由我的 AppModule 导入的

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

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

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

【参考方案1】：

只有当元素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。

【参考方案2】：

在 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 组件的其他模块中使用。

【讨论】：

感谢您的详细描述，我完全错了。我不明白导出是为了在其他模板中使用。很高兴知道。我也喜欢如何让选择器只用于元素。正是我正在寻找的。每个带有 is-right 的 bulma-breadcrumbs 元素。 :) 谢谢！