添加多个输入到一个结构指令

我一直在如何使用结构指令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>

这将引发错误 - Can't bind to 'delayFoo' since it isn't a known property of 'card'，因为我们是在为delay指令的结合部分我没想到这个错误。

本指令可以采取任何更多的投入？

编辑

感谢冈特回答问题的第一部分。但是，如果我在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

来源

2016-12-02 Katana24

其重命名为

@Input('delayFoo')

输入结构性指令需要包括选择。

来源

2016-12-02 14:10:43

感谢甘特 - 它的工作！我会假设选择器的前缀是为了防止冲突？有关于此的更多信息？ – Katana24

我希望能在https://angular.io/docs/ts/latest/guide/structural-directives.html中找到一些东西。我认为最近在一个GitHub的问题中提到了这个要求被删除（不确定）。我只记得自己碰到它，偶尔会看到它。 –

另外 - 如果我在card.componet中定义一个对象，如下所示：foo：Object = {bar：'some value'}并尝试通过它将打印为undefined - 为什么？我将编辑这个问题来详细说明 – Katana24

添加多个输入到一个结构指令

回答

相关问题