2016-08-24 6 views
5

На странице показана базовая разметка, утешительное сообщение и индикатор загрузки.ng-content в корне Угловой компонент 2

<html> 
... 
<body app> 
...page layout and loading stuff... 
</body> 

</html> 

И корневой компонент

@Component({ 
    selector: 'body[app]', 
    template: `<ng-content></ng-content>` 
}) 
App {} 

plunker, демонстрирующая проблема here.

После инициализации SPA предполагается, что элемент bootstrap body и скомпилировать компоненты при сохранении существующей базовой компоновки.

Однако корневой компонент просто игнорирует ng-content.

Это приводит к двум вариантам. Первоначальный макет должен быть сброшен и показан только после начальной загрузки. Или он должен дублироваться как в шаблоне корневого компонента, так и в HTML-документе (вероятно, с шаблонами на стороне сервера). Ни один из них не выглядит достаточно хорошим.

body содержит чувствительную разметку, которая не может быть просто завернута в дочерний компонент, чтобы преодолеть это ограничение. Я намерен использовать Angular Universal, чтобы обеспечить SPA со статическим предварительным просмотром, но не на этом этапе.

Похоже, что это известная проблема, но я не могу найти работоспособное решение.

Как это можно исправить?

+0

@ GünterZöchbauer предполагаемого дубликата содержит устаревшие ответы, которые я не нахожу удовлетворение. Все изменилось, и я надеялся, что есть лучший ответ, не без причины. – estus

+0

Что значит «не без причины». Я не знаю никаких изменений в отношении этого вопроса. –

+0

@ GünterZöchbauer Несмотря на название (возможно, неточное), это не вопрос RTM, а не дубликат, вопрос не в том, почему это происходит, но как добиться желаемого поведения. Я не доволен решением [this] (http://stackoverflow.com/a/35444285/3731501) и хотел бы знать, есть ли более идиоматические подходы, которые могут включать хакерские атаки на основных поставщиков A2 и не требуют Universal. Вопрос Дюпа уже получил справедливый ответ. Этого нет. – estus

ответ

5

Передача не поддерживается на корневом элементе, вы ничего не можете передать ему, потому что index.html не является частью углового. Если вы не можете встраивать html в другой компонент, я бы не ожидал, что он будет работать с ng-content.

От https://github.com/angular/angular/issues/1858#issuecomment-207993202

компоненты работают только в качестве компонентов при ссылке в шаблоне другого компонента, но они, как ожидается, будут использоваться за пределами этого , которая вызывает путаницу

+0

Ты избил меня, LOL !! –

Смежные вопросы