Wie man Variablen in Module und Komponenten in angular2 - angular übergibt

Ich benutze angular2, um mehrere UI zu boostenModule, wenn meine Webseite die Komponentenselektoren hat. Ich kann kein Haupt-App-Element verwenden und alle meine Inhalte darin einfügen. Ich möchte jedoch irgendwie Variablen an die einzelnen Komponenten übergeben.

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

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

Meine component/myapp.ts

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

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

Mein letzter Punkt wäre, irgendwie Elementattribute an ihre Komponenten übergeben zu können. Ich habe es versucht ElementRef das hat vorher in angular2 components funktioniert, aber nicht mehr in 2.0.0 (kein release candidate mehr).

Also bin ich irgendwie verloren.

Antworten:

Verwenden Sie diesen Code in der Komponente / myapp.ts
Der @Input () - Dekorator definiert eine Reihe von Parametern, die vom übergeordneten Element der Komponente übergeben werden können. Beispielsweise können wir die Hello-Komponente so ändern, dass der Name von parent.1 bereitgestellt werden kann

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

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