Wie man Variablen an Module und Komponenten in angular2 übergibt

Question

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

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

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

Mein 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 irgendwie wäre der Lage sein, in Element passieren Attribute ihrer Komponenten. Ich habe versucht, ElementRef, die zuvor in angular2 Komponenten, aber nicht mehr in 2.0.0 (nicht ein Release-Kandidat mehr) gearbeitet.

So bin ich irgendwie verloren.

Answer 1

Verwenden Sie diesen Code in der Komponente/myapp.ts
Die @Input() - Dekorator definiert eine Reihe von Parametern, die von der Eltern der Komponente übergeben werden können. Zum Beispiel können wir die Hello-Komponente modifizieren, so dass der Name vom Elternteil bereitgestellt werden kann.

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

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