gpt4 book ai didi

angular - 向结构指令添加多个输入

转载 作者:太空狗 更新时间:2023-10-29 18:26:11 27 4
gpt4 key购买 nike

我一直在关注如何使用结构指令的示例 here - 但我想做的一件事是将一些数据从 card.component 类传递到 delay.directive.ts。我该怎么做呢?

export class DelayContext {
/**
- Line below demonstrated passing into an array of functions that can be called in the HTML
*/
// constructor(private loadTime: number, private myFunc: Array<Function>) {}
constructor(private loadTime: number, private delayService: DelayService) {}
}

@Directive({ selector: '[delay]'})
export class DelayDirective {
constructor(
private templateRef: TemplateRef<DelayContext>,
private viewContainerRef: ViewContainerRef
) { }

@Input('delay')
set delayTime(time: number) {
setTimeout(
() => {
let embedView = this.viewContainerRef.createEmbeddedView(
this.templateRef,
// new DelayContext(performance.now(),[this.foo,this.bar])
new DelayContext(performance.now(), new DelayService())
);
console.log(embedView);
},
time);
}
}

我试过像这样定义另一个输入参数:

@Input('foo')
set fooParameter(parameters) {
console.log(parameters);
}

然后尝试以几种不同的方式在 HTML 中向它传递数据,但都没有奏效。这是我尝试过的:

 <card *delay="500 * item; let loaded = loadTime; foo: 'test'">
<div class="main">
<button>{{item}}</button>
</div>
<div class="sub">{{loaded | number:'1.4-4'}}</div>
</card>

这会引发错误 - 无法绑定(bind)到“delayFoo”,因为它不是“card”的已知属性 我没想到会出现此错误,因为我们在绑定(bind)部分delay 指令。

这个指令可以接受更多的输入吗?

编辑

感谢 Gunter 回答问题的第一部分。但是如果我像这样在 card.component.ts 中定义一个对象:

bar: Object = {
val: 'Some Value'
};

然后尝试将它传递给指令:

<card *delay="500 * item; let loaded = loadTime; foo: bar">

这总是打印undefined:

 @Input('delayFoo')
set setFoo(obj) {
console.log(obj)
}

我们不在卡片的上下文中吗?还有——完整的卡片组件:

import { Component } from '@angular/core';
import { DelayService } from './delay.service';

@Component({
selector: 'card',
template: `
<ng-content select=".main"></ng-content>
<ng-content select=".sub"></ng-content>`,
styles: [
`
:host {
display: inline-block;
font-family: 'Helvetica', sans-serif;
font-weight: 300;
margin: 1rem;
animation: fade-in 2s;
}

:host >>> .main {
padding: 2rem;
background: #e3f2fd;
font-size: 2rem;
text-align: center;
}

:host >>> .sub {
padding: 0.4rem;
background: #ef5350;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
`
]
})
export class CardComponent {
bar: Object = {
val: 'Some Value'
};
ngOnInit() {}
}

编辑

可以找到一个工作的 plunker here

最佳答案

重命名为

@Input('delayFoo')

结构指令中的输入需要包含选择器。

关于angular - 向结构指令添加多个输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40934139/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com