Передача данных из HTML-тела в корневой компонент

Я пытался передать данные из основного файла layout.html макета в угловой корневой / начальный компонент<my-app>, К сожалению, я не могу передать их так:<my-app [bodyData]="'passed'" ></my-app> из моего index.html.

Может ли кто-нибудь помочь мне, как я могу передать их? Предоставлена ​​тестовая ссылка.

Plunker Test App Ссылка

 Pankaj Parkar09 авг. 2016 г., 08:02
Вы можете создать сервис и получить данные из этого сервиса внутриApp составная часть

Ответы на вопрос(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']);
}
 Lansana Camara17 апр. 2018 г., 14:53
С какой стати ты так поступил? Угловой маршрутизатор должен ориентироваться на вас по умолчанию
Решение Вопроса

Привязка свойств не работает для корневых компонентов, то есть компонентов, которые вы загружаете.

Причина, по которой это не работает, заключается в том, что ваш index.html, в который вы помещаете, не является угловым компонентом. Из-за этого 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');
  }
}

Это будет работать только для строковых атрибутов ...

 John Pankowicz23 окт. 2017 г., 23:16
Я получаю ошибку компиляции "[ts] Свойство getAttribute не существует для типа ElementRef".
 John Pankowicz23 окт. 2017 г., 23:28
Но я могу избежать этой ошибки, используя метод @ Ratnam: сначала получить nativeElement, а затем использовать getAttribute.

Как сказано выше @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);
}
 John Pankowicz19 апр. 2018 г., 22:39
@federer Так как мы можем прочитать свойство объекта окна, я думаю, мы могли бы написать и одно. Я не пробовал это. У тебя есть? Хотя я не уверен, почему ты хочешь это сделать.
 BinarySolo14 февр. 2018 г., 16:44
Спасибо, что нашли время, чтобы написать это. Это элегантное решение и отлично работает.
 pranab vv18 апр. 2018 г., 17:10
@John Pankowicz, как передать данные из компонента в index.html?

Я попробовал тот же сценарий. Но я получаю значение как ноль.

В моем HTML у меня есть тег

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

И в компоненте я использовал

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

Это значение оповещения приходит как ноль

Ваш ответ на вопрос