在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能够像它那样表现为手风琴项目。

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

我现在想传递参数，以便我可以设置该手风琴项的标题和ID以及其他一些属性 在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”   因为它不是任何绑定指令的输入。请检查   拼写正确，并且预期指令包含在   主机组件的指令列表

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

Answer 1

如下所示，它适用于accordionItemId以外的所有输入：

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