Comment passer des variables aux modules et composants dans angular2 - angular

J'utilise angular2 pour booster plusieurs interfaces utilisateurmodules si ma page Web a les sélecteurs de composants. Je ne peux pas "utiliser un élément principal de l'application et y insérer tout mon contenu. Je souhaite toutefois transmettre des variables à chaque composant.

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

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

ma component/myapp.ts

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

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

Mon dernier point serait de pouvoir en quelque sorte pouvoir transmettre des attributs d'élément à leurs composants. J'ai essayé d'utiliser ElementRef qui fonctionnait auparavant dans les composants angular2, mais plus dans la version 2.0.0 (n’est plus une version candidate).

Donc je suis un peu perdu.

Réponses:

Utilisez ce code dans composant / myapp.ts
Le décorateur @Input () définit un ensemble de paramètres pouvant être transmis du parent du composant. Par exemple, nous pouvons modifier le composant Hello afin que ce nom puisse être fourni par le parent.1

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

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