How to make angular standalone directive globally available? - Stack Overflow

admin管理员组

文章数量:1348081

I have a few simple helper directives which I want to use throughout the entire app. With modules this was easy to do, but with standalone I don't know how we can do it.

One example of such a simple helper directive is:

@Directive({
  selector: '[click]',
  standalone: true,
  host: {
    class: 'on-click',
    tabindex: '0',
  },
})
export class ClickEventDirective {}

Every single component in the app that uses a (click)="clickHandler()" somewhere should have this applied. I was thinking of something like this, but it should trickle down to all child components.

@Component({
  selector: 'app',
  template: `
    <router-outlet />
  `,
  standalone: true,
  imports: [
    ClickEventDirective,
    ...
  ],
})

本文标签： How to make angular standalone directive globally availableStack Overflow