'权限'管道找不到？

Question

在step by step dev之后我试图隐藏未经授权的按钮。

这是按钮的代码，在phoneBook.component.html中：

<button *ngIf="'Pages.Tenant.PhoneBook.CreatePerson' | permission" class="btn btn-primary" (click)="createPersonModal.show()"><i class="fa fa-plus"></i> {{l("CreateNewPerson" | localize)}}</button>

当我运行项目时，我在控制台中收到错误：

ERROR Error: "Uncaught (in promise): Error: Template parse errors:
   The pipe 'permission' could not be found ("
        </div>

        <div class="col-sm-6 text-right">
              .......

我怎么能解决这个问题？

Answer 1

管道定义在ASP.NET Zero基础解决方案的v6.7.0中提供。

如果您使用的是旧版本，则可以查看相应版本的文档：https://docs.aspnetzero.com/documents/zero/v6.6.0/Developing-Step-By-Step-Angular#hide-unauthorized-button

这是来自aspnetzero/documents@bccbc7a的diff（截断）：

- *ngIf="isGranted('Pages.Tenant.PhoneBook.CreatePerson')"
+ *ngIf="'Pages.Tenant.PhoneBook.CreatePerson' | permission"

Answer 2

Custom pipes need to be created and imported into module.管道可以像这样使用：

<button *ngIf="(Pages?.Tenant?.PhoneBook?.CreatePerson' | permission).length === 0" 
    class="btn btn></button>

然后您的管道应如下所示：

@Pipe({name: 'permission'})
export class PermissionPipe implements PipeTransform {
  transform(value: number, exponent: string): number {
    ...
    return ...;
  }
}

以及模块中的声明：

import { LabTestService } from './lab-test/lab-test.service';
import { PermissionPipe } from './...';

@NgModule({
    declarations: [
        AppComponent,
        PermissionPipe 
    ],
    imports: [
        NgbModule.forRoot(),
        BrowserModule,
        FormsModule        
    ],
    ...
    bootstrap: [ AppComponent ]
})
export class AppModule { }

Answer 3

在链接的代码中，他们使用“权限”作为数据。

所以我认为他们犯了一个错误。他们不想在这里有一个管道，而是从后面有一个布尔数据。

所以它可能是<div *ngIf="... || permission">

（他们的github链接已经死了所以没有可能的方法来获得干净的代码）