Pass data from html body to root component

Question

I am trying to transfer data from the main layout.html layout file to the angular source component <my-app>. Unfortunately, I cannot pass them as follows: <my-app [bodyData]="'passed'" ></my-app>from my index.html.

Can someone help me how can I skip them? A test link is provided.

Link to the Plunker Test app

Answer 1

Property binding does not work with root components, that is, with components that you download.

, , , index.html, , angular. - angular . angular , , . ( )

:

• Angular 2

DOM:

<my-app bodyData="passed" ></my-app>

:

@Component({
  selector: 'my-app',
  template: `
    (...)
  `
})
export class MyAppComponent {
  constructor(private eltRef:ElementRef) {
    let prop = eltRef.getAttribute('bodyData');
  }
}

...

Answer 2

@Thierry, . , .

, .

appdata.ts

export class AppData {
  public isServerRunning: boolean;
  public isDataFromMemory: boolean;
}

,

index.html

<script>window.APP_DATA = { isServerRunning: false, isDataFromMemory: false }

.

main.tss

import { AppData } from './app/appdata';

app.module.ts

import { AppData } from './appdata';
...
providers: [AppData,
{
  provide: AppData,
  useValue: window['APP_DATA']
}
],

app.component.ts

constructor(appData:AppData) {
    console.log('AppComponent - ', appData);
}

Answer 3

. null.

HTML

<my-app myattr="passed" >Loading ..</my-app>    

,

constructor(private _elementRef: ElementRef){
    let native = this._elementRef.nativeElement;
    let test = native.getAttribute("myattr");
    alert(test);
}   

null

Answer 4

. . localStorage index.html:

<script>
      localStorage.setItem('startpath', window.location.pathname);
</script>

app.component :

ngOnInit() {

    var startpath = localStorage.getItem('startpath');
    if (startpath) {
        localStorage.removeItem('startpath');
        this._router.navigate([startpath]);
    } else
        this._router.navigate(['/dashboard']);
}