Angular 5.2.9结构型指令异常求助：权限控制元素显示问题

我来帮你排查这个问题——Angular 5.2.9作为比较早的版本，有些细节和新版不太一样，直接复制官方文档的示例很容易踩坑。先从正确实现权限控制的结构型指令开始，再逐一排查常见的异常点：

第一步：正确实现适配Angular 5.2.9的权限控制指令 #

先给你一个针对Angular 5.2.9的完整自定义指令示例，这个版本不支持providedIn: 'root'这类语法，所以要注意服务的注册方式：

1. 编写指令代码 #

import { Directive, Input, TemplateRef, ViewContainerRef, OnDestroy } from '@angular/core';
import { AuthService } from './auth.service'; // 你的权限校验服务
import { Subscription } from 'rxjs/Subscription';

@Directive({
  selector: '[appAuth]' // 指令选择器，模板中用*appAuth调用
})
export class AuthDirective implements OnDestroy {
  private permissionSubscription: Subscription;

  constructor(
    private templateRef: TemplateRef<any>, // 要渲染的模板引用
    private viewContainer: ViewContainerRef, // 模板容器
    private authService: AuthService
  ) {}

  // 绑定指令参数，比如*appAuth="'admin'"会把'admin'传到这里
  @Input() set appAuth(requiredPermission: string) {
    // 先取消之前的订阅，避免内存泄漏
    if (this.permissionSubscription) {
      this.permissionSubscription.unsubscribe();
    }

    // 假设你的AuthService有获取用户权限的方法，同步或异步都可以
    this.permissionSubscription = this.authService.getUserPermissions().subscribe(permissions => {
      const hasPermission = permissions.includes(requiredPermission);
      
      if (hasPermission) {
        // 有权限则渲染元素
        this.viewContainer.createEmbeddedView(this.templateRef);
      } else {
        // 无权限则清空容器，隐藏元素
        this.viewContainer.clear();
      }
    });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅
    if (this.permissionSubscription) {
      this.permissionSubscription.unsubscribe();
    }
  }
}

2. 模板中使用指令 #

<!-- 示例：只有拥有admin权限的用户能看到这个菜单 -->
<li *appAuth="'admin'">
  <a routerLink="/admin">后台管理</a>
</li>

<!-- 如果是不需要参数的全局权限判断，比如只要登录就显示 -->
<div *appAuth="''">
  登录后可见的内容
</div>

第二步：逐一排查常见异常原因 #

你复制文档代码出现问题，大概率是以下几个Angular 5特有的细节没注意：

• 模块未正确声明指令：Angular 5中自定义指令必须在使用它的模块的declarations数组里注册，同时权限服务要加到providers里：

  // app.module.ts 或对应功能模块
  import { NgModule } from '@angular/core';
  import { AuthDirective } from './auth.directive';
  import { AuthService } from './auth.service';
  
  @NgModule({
    declarations: [
      // ...你的其他组件、管道
      AuthDirective // 必须声明指令
    ],
    providers: [AuthService], // Angular 5不支持providedIn，手动注册服务
    // ...其他配置
  })
  export class AppModule { }
  

• 结构指令的*符号遗漏：结构指令必须加*前缀，或者用<ng-template>的写法，如果你漏了*，会报No provider for TemplateRef错误，比如：

  错误写法：<li appAuth="'admin'">
  正确写法：<li *appAuth="'admin'"> 或者 <ng-template [appAuth]="'admin'"><li>...</li></ng-template>

• 输入属性名不匹配：指令的@Input名称必须和选择器一致，比如选择器是[appAuth]，那么@Input()的setter必须叫appAuth，不能写错成auth或者其他名字，否则会报Can't bind to 'appAuth' since it isn't a known property错误。

• 异步权限的处理问题：如果你的权限是从后端异步获取的，直接在setter里同步判断会导致初始渲染错误，必须用订阅的方式等待权限数据返回，就像上面示例里那样处理。

• 版本差异导致的语法不兼容：官方文档的示例可能是针对Angular 6+的，比如providedIn: 'root'、@Optional()装饰器等，这些在Angular 5里不支持，要去掉或替换成对应版本的写法。

如果还有具体的浏览器控制台错误信息，可以贴出来，我再帮你精准定位问题。

内容的提问来源于stack exchange，提问作者tbddeveloper