如何将变量传入angular2中的模块和组件

如果我的网页有组件选择器，我将使用angular2增强多个UI模块。我不能使用主应用程序元素并将我的所有内容放在其中。然而，我想以某种方式将变量传递给每个组件

我的

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

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
}

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

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

我的

模块/myapp.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]);
                  });
        }
    }
});

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
}

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

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

我的

组件/myapp.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]);
                  });
        }
    }
});

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
}

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

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

我的最后一点是能够以某种方式将元素属性传递给它们的组件。我尝试过使用以前在angular2组件中使用过的

ElementRef

，但在2.0.0中不再使用了（不再是候选版本）

---

所以我有点迷路了。

在component/myapp.ts中使用此代码
@Input（）装饰器定义了一组可以从组件的父级传递的参数。例如，我们可以修改Hello组件，以便父级可以提供名称。1

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

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

从'@angular/core'导入{Component，Input}；
@组成部分({
选择器：“你好”，
模板：“你好，{{name}
”
})
出口类你好{
@Input（）名称：string；
}