Можно ли установить значение по умолчанию для ‹ng-content›

Я только что изучил использование Transluction в angular2 из этого урока:

https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

Я смог использовать тег <ng-content> для некоторого контента, например:

<ng-content select="[my-block-header]"></ng-content>

и лежит он в компоненте, к которому прикреплен селектор my-block.

Он отображает содержимое из другого моего компонента как:

<my-block>
    <div class="box-header" my-block-header> <--added the slot selector here
        <h3 class="box-title">
            My title
        </h3>
    </div>
</my-block>

Проблема в следующем:

Можно ли добавить в блок <ng-content> значение по умолчанию, которое можно было бы использовать, если бы мы не передавали никакого значения?

На данный момент, если значение не передано, на его месте будет пустая страница.

Изменить:

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

Cannot set property 'stack' of undefined ; Zone: <root> ; 
Task: Promise.then ; Value: TypeError: Cannot set property 'stack' of undefined

Но когда я изменил версию zone.js на 0.7.2, ошибка была четко указана в консоли как:

zone.js:392 Unhandled Promise rejection: Template parse errors:
<ng-content> element cannot have content.

Итак, это подтверждает, что не может быть значения по умолчанию, равного <ng-content>.


angular default-value angular2-ngcontent
person PaladiN    schedule 24.01.2017    source источник
comment
Отвечает ли это на ваш вопрос? В Angular 2, как проверить, является ли ‹ng- содержимое› пусто?   -  person rh16    schedule 27.03.2020

Ответы (3)


arrow_upward
5
arrow_downward

Просто используйте:

<ng-content #myBlockHeader select="[my-block-header]"></ng-content>
<div *ngIf="!myBlockHeader">Default Content</div>
person Mike    schedule 03.10.2019
comment
Это решение не работает для меня (угловой 9). Здесь есть несколько рабочих решений: stackoverflow.com/questions/35107211/ - person rh16; 27.03.2020

arrow_upward
4
arrow_downward

Из angular 10 работает следующее:

<div #ref><ng-content></ng-content></div>
<ng-container *ngIf="!ref.hasChildNodes()">
   Default Content
</ng-container>
person Deb    schedule 04.02.2021

arrow_upward
-6
arrow_downward

Что, если вы поместите некоторую разметку в тег <ng-content>?

<ng-content select="[my-block-header]">
  <p>Some default markup here</p>
</ng-content>
person AngularChef    schedule 24.01.2017
comment
У меня выдает ошибку: Cannot set property 'stack' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot set property 'stack' of undefined - person PaladiN; 24.01.2017
comment
облом. Тогда я не знаю, как поступить. - person AngularChef; 24.01.2017
comment
Мы не можем установить значение по умолчанию для ‹ng-content›. Теперь сообщение об ошибке ясно упоминает об этом: <ng-content> element cannot have content. - person PaladiN; 26.01.2017
comment
С ViewEncapsulation.Native вы можете использовать элемент <content> или <slot>. <content> поддерживает контент по умолчанию, не знаю насчет <slot>. Однако Native в настоящее время плохо поддерживается. В частности, стиль может стать проблемой, потому что >>> или /deep/ больше не будут работать. - person Günter Zöchbauer; 26.01.2017
comment
Есть ли лучшие варианты, чем использование <content>? У меня есть значения по умолчанию с использованием <content>, но это не позволяет мне переопределить, если я не использую ViewEncapsulation.Native, и, как вы сказали ранее, это тоже нарушает мои стили :( - person PaladiN; 27.01.2017