कोणीय 2 - कोणीय में मॉड्यूल और घटकों के चर में कैसे पास करें

मैं कई यूआई को बढ़ावा देने के लिए कोणीय 2 का उपयोग कर रहा हूंमॉड्यूल अगर मेरे वेबपेज में घटक चयनकर्ता हैं। मैं "मुख्य ऐप एलिमेंट का उपयोग नहीं कर सकता हूं और अपनी सारी सामग्री इसके अंदर डाल सकता हूं। मैं चाहता हूं कि मैं किसी भी तरह से किसी भी कंपोनेंट में वेरिएबल पास करूं।

मेरे init.ts

System.import("@angular/platform-browser_dynamic").then(function(pbd) {
const platform = pbd.platformBrowserDynamic();

// I will put all my modules information here
const modules = {
"my-app": {
selector: "my-app",
file: "myapp",
import: "MyAppModule"
}
};

// Loop through my settings object and look for modules/components to be bootstrapped if their selector exists on the current page
for(var module in modules) {
if(document.querySelectorAll(modules[module].selector).length > 0) {
System.import("app/modules/" + modules[module].file)
.then(function(m) {
platform.bootstrapModule(m[modules[module].import]);
});
}
}
});

मेरे modules/myapp.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { MyAppComponent } from "app/components/myapp";

@NgModule({
imports: [ BrowserModule ],
declarations: [ MyAppComponent ],
bootstrap: [ MyAppComponent ]
})
export class MyAppComponent {
// maybe dynamically bootstrap components here
}

मेरे component/myapp.ts

import { Component } from "@angular/core";

@Component({
selector: "my-app",
template: "Hello World"
})
export class MyAppComponent {
// or import data here
}

मेरा अंतिम बिंदु किसी भी तरह से उनके घटकों में तत्व विशेषताओं को पारित करने में सक्षम होगा। मैंने "प्रयोग करने की कोशिश की है ElementRef पहले यह कोणीय 2 घटकों में काम करता था, लेकिन अब 2.0.0 में नहीं (अब कोई रिलीज उम्मीदवार नहीं)।

इसलिए मैं खोया हुआ हूं।

उत्तर:

घटक / myapp.ts में इस कोड का उपयोग करें
@Input () डेकोरेटर पैरामीटर के एक सेट को परिभाषित करता है जिसे घटक के माता-पिता से नीचे पारित किया जा सकता है। उदाहरण के लिए, हम हैलो घटक को संशोधित कर सकते हैं ताकि मूल नाम द्वारा प्रदान किया जा सके

import {Component, Input} from "@angular/core";

@Component({
selector: "hello",
template: "<p>Hello, {{name}}</p>"
})
export class Hello {
@Input() name: string;
}