将多个参数传递给 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 插入手风琴

中

我现在想传入参数，以便我可以设置该 accordionItem 的标题和 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: Can't bind to 'accordionItemTitle' since it isn't a known native property or known directive. Please fix typo or add to directives list.

尝试不带方括号：

<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: Can't bind to 'accordionItemAccordionItemTitle' since it isn't an input of any bound directive. Please check that the spelling is correct, and that the intended directive is included in the host component's list of directives

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

Answer 1

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

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

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

Passing multiple parameters to a structural directive in AngularDart 5

dart

angular-dart

angular