将多个参数传递给 AngularDart 5 中的结构指令

Question

我想将多个参数传递给结构指令，但在 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;

    ...

}

我希望这两个标有*accordionItem 的 div 会呈现为它所做的手风琴项。

手风琴项目：

@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 插入到手风琴内

我现在想传入参数，以便我可以设置该手风琴项的标题和 ID 以及其他一些属性 在手风琴ItemDirective 上，我添加了一些输入：

@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” 因为它不是任何绑定指令的输入。请检查 拼写正确，并且预期的指令包含在 宿主组件的指令列表

将参数传递给结构指令的正确方法是什么？

Answer 1

看起来这适用于accordionItemId以外的所有输入：

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