Jak przekazywać zmienne do modułów i komponentów w angular2 - angleular

Używam angular2, aby poderwać wiele UImoduły, jeśli moja strona zawiera selektory komponentów. Nie mogę użyć głównego elementu aplikacji i umieścić w nim wszystkich moich treści, ale chcę jakoś przekazać zmienne do każdego komponentu.

Mój 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]);
});
}
}
});

Mój 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
}

Mój component/myapp.ts

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

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

Moim ostatnim punktem jest jakoś przekazanie atrybutów elementów do ich komponentów. Próbowałem używać ElementRef które wcześniej działały w komponentach kątowych2, ale już nie w wersji 2.0.0 (nie jest już kandydatem do wydania).

Więc jestem trochę zagubiony.

Odpowiedzi:

Użyj tego kodu w component / myapp.ts
Dekorator @Input () definiuje zestaw parametrów, które można przekazać z nadrzędnego elementu komponentu, na przykład możemy zmodyfikować komponent Hello, aby można było podać nazwę przez element nadrzędny.1

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

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