Передавать данные из html body в корневой компонент

Я пытаюсь передать данные из основного файла layout.html layout в исходный компонент angular . К сожалению, я не могу передать их следующим образом: из моего index.html.

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

Ссылка на приложение Plunker Test

4 ответа

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

Причина, по которой это не работает, заключается в том, что ваш index.html, в который вы помещаете, не является компонентом angular. Из-за этого angular не будет компилировать этот элемент. И angular не считывает значения атрибутов во время выполнения, только во время компиляции, так как в противном случае мы получили бы удар производительности. (Тобиас Бош)

Смотрите этот вопрос:

Обходным путем было бы использовать DOM:

и в компоненте:

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

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


Как сказано выше в @Thierry, его предложенный метод действителен только для передачи строковых атрибутов. Ниже приведен метод, с помощью которого вы можете передать объект с определенными свойствами.

Создайте класс для данных, которые вы хотите передать.

appdata.ts

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

Определить экземпляр объекта окна, содержащий ваши данные запуска

index.html


Всегда приятно воскрешать давно мертвые темы. Вот мое решение. Я использовал localStorage в index.html:

Тогда в app.component просто:

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


Я пробовал такой же сценарий. Но я получаю значение как 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

licensed under cc by-sa 3.0 with attribution.