構造指示に複数の入力を追加する

Question

構造指示の使用方法の例と一緒に私は従ってきましたが、私ができることの1つは、いくつかのデータを渡すことです。 クラスを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ディレクティブの結合部であるので、私はこのエラーを期待していませんでした。

これ以上入力することはできますか？質問の最初の部分に答えるためのギュンターへ

EDIT

感謝。私はこのような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() {} 
} 

EDIT

作業plunkerがhere

Answer 1

を見つけることができますがインクルードする必要があり、構造ディレクティブで

@Input('delayFoo') 

入力に名前を変更しますセレクタ。