Hinzufügen von mehr als einer Eingabe zu einer Struktur-Richtlinie

Question

Ich habe mit einem Beispiel für die Verwendung von Struktur-Direktiven here folgen - aber eine Sache, die ich tun könnte, wäre, einige Daten aus übergeben die card.component Klasse in die delay.directive.ts. Wie mache ich das?

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); 
    } 
} 

Ich habe versucht, wie so eine weitere Eingabeparameter definieren:

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

und dann versucht, es zu passieren Daten in den HTML verschiedene Möglichkeiten, von denen keines gearbeitet. Hier ist, was ich versucht habe:

<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> 

Dies wirft einen Fehler - Can't bind to 'delayFoo' since it isn't a known property of 'card' Ich habe nicht diesen Fehler erwarten, weil wir in den Bindungsteile für die delay Richtlinie sind.

Kann diese Richtlinie mehr Eingaben machen?

EDIT

Dank Gunter für den ersten Teil der Frage zu beantworten. Aber wenn ich ein Objekt in der card.component.ts wie folgt definieren:

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

und dann versuchen, es auf die Richtlinie zu übergeben:

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

dies immer druckt undefined:

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

Sind wir außerhalb des Kontextes der Karte hier? Auch - die komplette Karte Komponente:

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

Eine Arbeits Plunker gefunden werden kann here

Answer 1

Benennen Sie es

@Input('delayFoo') 

Inputs in strukturellen Richtlinien müssen umfassen die Wähler.