Angular Структурная директива с несколькими параметрами - PullRequest
Новая
       10

Angular Структурная директива с несколькими параметрами

1 голос
/ 19 июня 2020

Я не могу заставить структурную директиву работать с несколькими параметрами.

Этот код работает, два параметра регистрируются, но это не структурная директива: 

import { Input, Directive, AfterViewInit } from "@angular/core";
import { ProfileModel } from "../auth/auth.models";

@Directive({
    selector: 'hasRole'
})
export class HasRoleDirective implements AfterViewInit {

    @Input()
    public profile: ProfileModel;

    @Input()
    public roleName: string;

    ngAfterViewInit(): void {
        console.log(this.roleName, this.profile);
    }
}

с такой разметкой: 

<hasRole [roleName]="'Admini'" [profile]="profile">A</hasRole>

Но этот код не работает, т.е. когда я переключаюсь на структурную директиву, значение в AfterViewInit отсутствует: 

import { Input, Directive, AfterViewInit, ViewContainerRef, TemplateRef } from "@angular/core";
import { ProfileModel } from "../auth/auth.models";

@Directive({
    selector: '[hasRole]'
})
export class HasRoleDirective implements AfterViewInit {

    @Input()
    public profile: ProfileModel;

    @Input()
    public roleName: string;

    constructor(
        private view: ViewContainerRef,
        private templateRef: TemplateRef<any>,
    ) {
    }

    ngAfterViewInit(): void {
        console.log(this.roleName, this.profile);

        //if (this.profile.roles.find(o => o === this.roleName)) {
        //    this.viewContainer.createEmbeddedView(this.templateRef);
        //} else {
        //    this.viewContainer.clear();
        //}
    }
}

с такой разметкой: 

<div *hasRole [roleName]="'Admini'" [profile]="profile">A</div>

1 Ответ

2 голосов
/ 19 июня 2020

В структурной директиве нельзя использовать скобки для ввода. И также лучше, когда ваш первый ввод будет иметь то же имя, что и Directive (hasRole)

Ваша разметка должна выглядеть так: 

<div *hasRole="'Admini';profile:'profile'"></div>

Тогда ваши @Inputs будут: 

@Input()
public hasRole: string;

@Input()
public hasRoleProfile: ProfileModel;

Или вы можете использовать шаблон 

<template [hasRole]="hasRole" [profile]="'profile'">
  </div></div>
</template>
...