将多个参数传递给AngularDart 5中的结构指令 [英] Passing multiple parameters to a structural directive in AngularDart 5
问题描述
我想将多个参数传递给结构化指令，但是在Angular2中工作的东西似乎不再在Angular5中工作
I want to pass in multiple params to a structural directive, but what was working in Angular2 doesn't seem to work in Angular5 anymore
这是我的blah组件，其中包含一个手风琴:
Here's my blah component which contains an accordion:
@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能够像它那样表现为手风琴项目.
I'm expecting those two divs marked with *accordionItem to be rendered as accordion items which it does.
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:
And then the AccordionItemDirective which creates the AccordionItem and adds it to the 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插入到手风琴中
Up to here, it works fine, the AccordionItems are created and inserted as li inside the accordion
我现在想传递参数，以便我可以设置该手风琴项的标题和ID以及其他一些属性 在AccordionItemDirective上，我添加了一些输入:
I now want to pass in params so that i can set the title and id and some other properties of that accordionItem On the accordionItemDirective, i add some inputs:
@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"，因为它不是已知的本机属性，或者 已知指令.请修正拼写错误或将其添加到指令列表中.
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>
它可以编译，但是什么也没发生.
it compiles, but nothing happens.
我尝试拦截输入，但是我的log.fines根本没有被打印
I try to intercept the input, but my log.fines aren't being printed at all
@Input("accordionItemTitle")
set accordionItemTitle(String title) {
log.fine(title);
}
String get accordionItemTitle {
return "Missing Title [...]";
}
在Angular2中，这曾经可以工作:
In Angular2, this used to work:
<accordion>
<div *accordionItem="accordionItemTitle: 'Title1' ">
item1
</div>
<div *accordionItem>
item2
</div>
</accordion>
但那也是在抱怨:
ParseErrorLevel.FATAL:无法绑定到"accordionItemAccordionItemTitle" 因为它不是任何绑定指令的输入.请检查 拼写正确，并且预期的指令已包含在其中 主机组件的指令列表
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
将参数传递给结构指令的正确方法是什么?
What is the correct way to pass in parameters to a structural directive ?
推荐答案
看起来像这样适用于accordionItemId以外的所有输入:
Looks like this works for all inputs other than accordionItemId:
<accordion>
<div *accordionItem="title: 'Title1'; active: true ">
item1
</div>
<div *accordionItem="title: 'Title2'; active: true ">
item2
</div>
</accordion>
这篇关于将多个参数传递给AngularDart 5中的结构指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
