基于角色的视图的 Angular 8 指令

Posted 2023-02-22

【中文标题】基于角色的视图的 Angular 8 指令

【英文标题】：Angular 8 Directive for role based views

【发布时间】：2021-05-06 00:03:55

【问题描述】：

我正在查看这个基于用户角色显示组件的示例： https://blog.strongbrew.io/display-a-component-based-on-role/

由于has-role.directive.spec.ts 内的构造函数中缺少参数，我的代码无法编译。从 has-role.directive.ts 开始，它需要 3 个参数：来自 Angular 核心的 ViewContainerRef 和 TemplateRef，以及用于获取用户角色的服务。

has-role.directive.ts

    constructor(
    private viewContainerRef: ViewContainerRef,
    private templateRef: TemplateRef<any>,
    private authenticationService: AuthenticationService)

但在示例教程中，它的用法如下： has-role.directive.spec.ts

 describe('HasRoleDirective', () => 
  it('should create an instance', () => 
    const directive = new HasRoleDirective();
    expect(directive).toBeTruthy();
  );
);

这在示例中如何工作，但对我来说它抱怨缺少参数？

---

更新：

按照 Michał 的建议，我创建了要添加到构造函数的类：

class TestViewContainerRef extends ViewContainerRef 
    element: ElementRef<any>;
    injector: Injector;
    parentInjector: Injector;
    clear(): void 
        throw new Error('Method not implemented.');
    
    get(index: number): ViewRef 
        throw new Error('Method not implemented.');
    
    length: number;
    createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, index?: number): EmbeddedViewRef<C> 
        throw new Error('Method not implemented.');
    
    createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], ngModule?: NgModuleRef<any>): ComponentRef<C> 
        throw new Error('Method not implemented.');
    
    insert(viewRef: ViewRef, index?: number): ViewRef 
        throw new Error('Method not implemented.');
    
    move(viewRef: ViewRef, currentIndex: number): ViewRef 
        throw new Error('Method not implemented.');
    
    indexOf(viewRef: ViewRef): number 
        throw new Error('Method not implemented.');
    
    remove(index?: number): void 
        throw new Error('Method not implemented.');
    
    detach(index?: number): ViewRef 
        throw new Error('Method not implemented.');
    


let viewContainerRefMock = 
  viewContainerRef: TestViewContainerRef
;

describe('HasRoleDirective', () => 
  it('should create an instance', () => 
    const directive = new HasRoleDirective(viewContainerRefMock, templateRefMock, authenticationServiceMock);
    expect(directive).toBeTruthy();
  );
);

现在它抱怨我的课：

【参考方案1】：

只需为构造函数参数创建模拟类，根据您的需要扩展抽象。例如。在has-role.directive.spec.ts创建

class TestViewContainerRef extends ViewContainerRef  
class TestTemplateRef extends TemplateRef<eny>  
class TestAuthenticationService extends AuthenticationService  

然后从接口实现所有需要的方法。他们可以拥有像throw new Error("Method not implemented."); 这样的身体——无论如何，你不会在这样的测试中使用它。只需为每个对象创建对象并放入 HasRoleDirective 构造函数。

【讨论】：

如何通过接口实现这些方法？我似乎没有得到它的权利。 TemplateRef 和 A​​uthenticationService 开箱即用，但“class TestViewContainerRef extends ViewContainerRef ”只是抱怨。

在这个例子中他怎么可能不需要这样做，但我也有？

【参考方案2】：

好吧，显然您缺少错误消息中描述的一些参数。在您的应用程序中使用该指令时，Angular 会创建这 3 个依赖项并将它们注入到您的指令中。

在您的示例中，您正在测试中创建指令的实例。 Angular 无法注入这些依赖项，因为没有 Angular，它是一个测试。由于 Angular 没有提供它们，因此您应该手动提供它们。这是解释here。

您所指的博客不需要它们的原因是该博客没有对其进行单元测试。

【讨论】：

谢谢，准备阅读。我猜想在 Angular 的文档中阅读更多内容可能是个好主意。