कोणीय 2 बाहरी इनपुट

Question

कृपया आप मदद कर सकते हैं? बस कोणीय 2 से शुरू करना और निम्नलिखित समस्याएं हैं।

मेरे घटक नीचे है:

@Component({ 
    selector: 'myapp', 
    inputs: ['mynumber'] 
}) 
@View({ 
    template: `<p>The next number is {{ mynumber + 1 }}</p>' 
}) 
export class App { 
    mynumber: number; 
} 
bootstrap(App); 

मेरी HTML के अंदर:

<myapp [mynumber]='41'></myapp> 

लेकिन जब रन मैं निम्नलिखित:

अगले संख्या NaN

ऐसा लगता है सरल लेकिन मुझे कुछ याद आ रही है। जो मैं हासिल करने की कोशिश कर रहा हूं वह ऐप के बाहर से मूल्य को पास कर रहा है।

धन्यवाद।

Answer 1

आप अपने आवेदन के मूल घटक के लिए संपत्ति बाइंडिंग (इनपुट) निर्दिष्ट नहीं कर सकते हैं। यदि आप वास्तव में इसके लिए कुछ बाध्यकारी निर्दिष्ट करना चाहते हैं तो आपको अतिरिक्त घटक का उपयोग करना चाहिए। this plunkers देखें।

import {Component, Input} from 'angular2/angular2' 

@Component({ 
    selector: 'myapp', 
    template: ` 
    <p>The next number is {{ mynumber + 1 }}</p> 
    ` 
}) 
class App { 
    @Input() mynumber: number; 
} 

@Component({ 
    selector: 'root', 
    directives: [App], 
    template: ` 
    <myapp [mynumber]="41"></myapp> 
    ` 
}) 
export class Root {} 

Answer 2

का संभावित हल सीधे ElementRef का उपयोग कर इसे पढ़ रही है:

constructor(elementRef:ElementRef) { 
    console.log(elementRef.nativeElement.getAttribute('someattribute'); 
} 

और का उपयोग कर ElementRef

<myapp mynumber='41'></myapp> 

भी देखें https://github.com/angular/angular/issues/1858

Answer 3

अद्यतन की तरह उपयोग उत्तर देने के लिए: का उपयोग प्रतिपादक। इसके बजाए रूट रूट करें। कोई भी ElementRef.nativeElement का उपयोग करने का प्रयास कर रहा है शायद यह एक अंतिम उपाय आदि के बारे में विभिन्न चेतावनियों को देख रहा है। यहां एक संशोधित, सुरक्षित संस्करण है।

constructor(renderer: Renderer){ 
    let rootElement = renderer.selectRootElement('app-root'); 
    this.whateverInput = rootElement.getAttribute('my-attribute'); 
} 

Answer 4

का उपयोग कर उन लोगों के लिए कोणीय 4:

class Component { 
    constructor(@Attribute('attributeName') public param:String){ 
     /** some process with your injected param **/ 
    } 
} 

: आपको लगता है कि

<myapp mynumber='41'></myapp> 

की तरह एक विशेषता के रूप में उपयोग करने का निर्णय लेते तुम बस एनोटेशन @Attribute उस तरह इस्तेमाल कर सकते हैं परीक्षण और मेरे ऐप में सफलतापूर्वक काम किया। https://gillespie59.github.io/2015/10/08/angular2-attribute-decorator.html