- 首页
- 其他开发
- 将多个参数传递给 AngularDart 5 中的结构指令
将多个参数传递给 AngularDart 5 中的结构指令
[英] Passing multiple parameters to a structural directive in AngularDart 5
本文介绍了将多个参数传递给 AngularDart 5 中的结构指令的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想将多个参数传递给结构指令，但在 Angular2 中起作用的内容在 Angular5 中似乎不再起作用
这是我的 blah 组件，其中包含一个手风琴:
@Component(选择器:废话场景"，//语言=HTML模板: """<div>废话测试页<手风琴><div *accordionItem>项目 1
<div *accordionItem>项目 2
</手风琴>
""",指令:const [手风琴，手风琴项目指令])类 BlahScene 实现 AfterContentInit、OnDestroy {...}
手风琴定义如下:
@Component(选择器:'手风琴'，//语言=HTML模板: """<ul class="手风琴"[id]="id"[attr.data-slide-speed]="slideSpeed"[attr.data-multi-expand]="multiExpand"[attr.data-allow-all-closed]="allowAllClosed"><ng-content></ng-content>""",样式:const [""".溢出隐藏{溢出:隐藏；}"""],)类手风琴实现 AfterContentInit、OnDestroy、OnChanges {@ContentChildren(AccordionItemDirective)列表<AccordionItemDirective>项目;...}
我希望这两个标有 *accordionItem 的 div 被呈现为它所做的手风琴项目.
手风琴项目:
@Component(选择器:li"，模板: """我现在想传入参数，以便我可以设置该手风琴项目的标题和 ID 以及其他一些属性在accordionItemDirective 上，我添加了一些输入:
@Input("accordionItemId") String AccordionItemId = "";bool _accordionItemActive = false;@Input("accordionItemTitle")String AccordionItemTitle = "缺少标题";
期待这个工作:
<div *accordionItem [accordionItemTitle]="'Title1'">项目 1
<div *accordionItem>项目 2
</手风琴>
我收到此错误:
<块引用>
lib/component/test/blah-scene.dart:ParseErrorLevel.FATAL:无法绑定到accordionItemTitle"，因为它不是已知的本地属性或已知指令.请修正拼写错误或添加到指令列表中.
在没有方括号的情况下尝试:
<div *accordionItem AccordionItemTitle="'Title1'">项目 1
<div *accordionItem>项目 2
</手风琴>
它编译了，但什么也没发生.
我尝试拦截输入，但我的 log.fines 根本没有打印
@Input("accordionItemTitle")设置手风琴ItemTitle(字符串标题){log.fine(title);}字符串获取手风琴ItemTitle {return "缺少标题 [...]";}
在 Angular2 中，这曾经有效:
<手风琴><div *accordionItem="accordionItemTitle: 'Title1' ">项目 1<div *accordionItem>项目 2
</手风琴>
但这也是在抱怨:
<块引用>ParseErrorLevel.FATAL:无法绑定到accordionItemAccordionItemTitle"因为它不是任何绑定指令的输入.请检查拼写正确，并且预期的指令包含在宿主组件的指令列表
将参数传递给结构指令的正确方法是什么?
解决方案
看起来这适用于除 accordionItemId 之外的所有输入:
<手风琴><div *accordionItem="title: 'Title1'; active: true ">项目 1<div *accordionItem="title: 'Title2'; active: true ">项目 2
</手风琴>
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
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 {
...
}
Accordion is defined as follow:
@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;
...
}
I'm expecting those two divs marked with *accordionItem to be rendered as accordion items which it does.
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;
...
}
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;
}
...
Up to here, it works fine, the AccordionItems are created and inserted as li inside the accordion
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";
Expecting this to work:
<accordion>
<div *accordionItem [accordionItemTitle]="'Title1'">
item1
</div>
<div *accordionItem>
item2
</div>
</accordion>
i get this error:
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.
Trying it without the square brackets:
<accordion>
<div *accordionItem accordionItemTitle="'Title1'">
item1
</div>
<div *accordionItem>
item2
</div>
</accordion>
it compiles, but nothing happens.
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 [...]";
}
In Angular2, this used to work:
<accordion>
<div *accordionItem="accordionItemTitle: 'Title1' ">
item1
</div>
<div *accordionItem>
item2
</div>
</accordion>
but that too is complaining:
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 ?
解决方案
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屋！
查看全文
