Open wardbell opened 8 years ago
You could inject something at bootstrap.
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { AppConfig } from "./app.config";
import { AppConfigImpl } from "./app.config-impl";
{
var config = new AppConfigImpl();
config.title = "Tour of Heroes";
config.heroesUrl = "app/heroes";
platformBrowserDynamic([{provide: AppConfig, useValue: config}])
.bootstrapModule(AppModule);
}
Many apps would like to pass information from the host web page to the Angular app on the page. That A2 app is the root component.
The desired information is typically generated into the web page by a server-side rendering engine, e.g., rendering in a Node Express app, razor output in an ASP.NET MVC app.
This is a documentation request, derived from angular issue #1858.
The following describes much of what this cookbook would demonstrate.
There are at least three ways info could arrive:
<my-app name="John Doe"></my-app>
window.document
1. Attribute value case
A root component can't bind to inputs because it sits above all other components; there is no parent component to bind to. So we can't treat
name="John Doe"
as an input property binding. Per angular issue #1858, we can injectelementRef
and get the attribute value from there.2. JavaScript data case
Can create a service to access data in
window.document
and provide that service during bootstrapping. See Rob's example in angular issue #1858.3. Data-in-page case
The solution is a variation on (2) in which the service extracts the in-page data as
innerHtml
and turns it into data for the app to consume.