Передача нескольких параметров в структурную директиву в AngularDart 5 - PullRequest
Новая
       45

Передача нескольких параметров в структурную директиву в AngularDart 5

0 голосов
/ 27 июня 2019

Я хочу передать несколько параметров структурной директиве, но то, что работало в Angular2, похоже, больше не работает в Angular5

Вот мой blah компонент, который содержит аккордеон: 

@Component(
    selector: "blah-scene",
    // language=HTML
    template: """
        <div>
            Blah Test Page
            <accordion>
                <div *accordionItem>
                    item1
                </div>
                <div *accordionItem>
                    item2
                </div>
            </accordion>
        </div>
    """,
    directives: const [
        Accordion,
        AccordionItemDirective
    ]
)
class BlahScene implements AfterContentInit, OnDestroy {
...
}

Аккордеон определяется следующим образом: 

@Component(
    selector: 'accordion',
    // language=HTML
    template: """
    <ul class="accordion"
        [id]="id"
        [attr.data-slide-speed]="slideSpeed"
        [attr.data-multi-expand]="multiExpand"
        [attr.data-allow-all-closed]="allowAllClosed">
        <ng-content></ng-content>
    </ul>
    """,
    styles: const ["""
        .overflow-hidden {
            overflow: hidden;
        }
    """
    ],
)
class Accordion implements AfterContentInit, OnDestroy, OnChanges {

    @ContentChildren(AccordionItemDirective)
    List<AccordionItemDirective> items;

    ...

}

Я ожидаю, что эти два элемента div, отмеченные *accordionItem, будут отображаться как элементы аккордеона, которые он делает.

AccordionItem: 

@Component(
    selector: "li",
    template: """
    <a
        *ngIf="visible"
        class="accordion-title"
        [attr.did]="title"
        (click)='onClickTitle(title)'>
        {{title?.toUpperCase()}}
        <img
            src="{{expandButtonPath()}}"
            class="expand-navbar"
            [class.disabled]='!allowClose && active'>
    </a>

    <div
        class="accordion-content no-padding"
        [class.hidden]='!active'
        [class.overflow-hidden]="hideScrollBars"
        [class.overflow-auto]="!hideScrollBars"
        data-tab-content>
        <template
            [ngIf]="renderAccordionItemContent && visible"
            [ngTemplateOutlet]="template">
        </template>
    </div>
    """,
    styles: const ["""
        ...
    """],
    directives: const [
        NgTemplateOutlet,
        coreDirectives
    ]
)
class AccordionItem implements AfterContentInit, OnDestroy {

    TemplateRef template;

   ...

}

А затем AccordionItemDirective, который создает AccordionItem и добавляет его в DOM: 

@Directive(selector: '[accordionItem]')
class AccordionItemDirective implements AfterContentInit {

    final ViewContainerRef vcRef;
    final TemplateRef template;

    AccordionItemDirective(this.vcRef, this.template);

    AccordionItem accordionItem;

    ComponentRef componentRef;
    String accordionId;

    @override
    ngAfterContentInit() async {

        template.createEmbeddedView();

        final ComponentRef<AccordionItem> component =
            vcRef.createComponent(accordionItemTemplate.AccordionItemNgFactory);
        accordionItem = component.instance;

        accordionItem
            ..template = template
            ..active = _accordionItemActive
            ..title = accordionItemTitle
            ..accordionId = accordionId;

    }

...

До этого все работает нормально, AccordionItems создаются и вставляютсякак li внутри аккордеона

enter image description here

Теперь я хочу передать параметры, чтобы я мог установить заголовок, идентификатор и некоторые другие свойства этогоaccordionItem В accordionItemDirective я добавляю несколько входных данных: 

@Input("accordionItemId") String accordionItemId = "";
bool _accordionItemActive = false;

@Input("accordionItemTitle")
String accordionItemTitle = "Missing Title";

Ожидается, что это сработает: 

<accordion>
    <div *accordionItem [accordionItemTitle]="'Title1'">
        item1
    </div>
    <div *accordionItem>
        item2
    </div>
</accordion>

Я получаю эту ошибку:

lib / component/test/blah-scene.dart: ParseErrorLevel.FATAL: Невозможно привязать к 'accordionItemTitle ', поскольку это не известное нативное свойство или известная директива.Пожалуйста, исправьте опечатку или добавьте в список директив.

Попытка без квадратных скобок: 

<accordion>
    <div *accordionItem accordionItemTitle="'Title1'">
        item1
    </div>
    <div *accordionItem>
        item2
    </div>
</accordion>

она компилируется, но ничего не происходит.

Я пытаюсьперехватить ввод, но мои log.fines не печатаются вообще 

@Input("accordionItemTitle")
set accordionItemTitle(String title) {
    log.fine(title);
}
String get accordionItemTitle {
    return "Missing Title [...]";
}

В Angular2 это работало: 

        <accordion>
            <div *accordionItem="accordionItemTitle: 'Title1' ">
                item1
            </div>
            <div *accordionItem>
                item2
            </div>
        </accordion>

, но это тоже жалуется:

ParseErrorLevel.FATAL: Невозможно связать с 'accordionItemAccordionItemTitle', так как он не является вводом какой-либо связанной директивы.Пожалуйста, проверьте правильность написания и то, что предполагаемая директива включена в список директив компонента хоста

Как правильно передать параметры в структурную директиву?

1 Ответ

0 голосов
/ 27 июня 2019

Похоже, это работает для всех входов, кроме accordionItemId: 

        <accordion>
            <div *accordionItem="title: 'Title1'; active: true ">
                item1
            </div>
            <div *accordionItem="title: 'Title2'; active: true ">
                item2
            </div>
        </accordion>
...