Angular 4 ngComponentOutlet загружает динамические компоненты, но содержимое маршрута не отображается

Я пытаюсь загрузить разные "родительские" компоненты и внедрить содержимое маршрута в эти разные родительские компоненты, настроив таргетинг. ng-content в каждом родительском компоненте. По сути, каждый родительский компонент обрабатывает навигацию и другие стандартные элементы в зависимости от ширины устройства (маленький / мобильный, средний / планшетный и большой / рабочий стол).

Содержимое, сгенерированное для каждого маршрута в моем приложении, должно быть включено (вставлено) в родительские компоненты. Содержимое для каждого маршрута предназначается для определенных точек закачки, используя ng-content,

Я могу поменять родительские компоненты, используя <ng-container *ngComponentOutlet="ResponsiveComponent;"></ng-container>, Проблема в том, что контент, созданный моим маршрутом, не попадает в целевой ng-content местоположения в каждом родительском компоненте.

Вот код для замены родительских компонентов. AppPageComponent продолжается ResponsiveComponent который контролирует ширину устройства на основе медиа-запросов.

@Component({
    selector: 'app-page',
    template: `
        <ng-container *ngComponentOutlet="ResponsivePageComponent;"></ng-container>     
    `,  
    styleUrls: [ './page.component.scss'],
    providers: []
})
export class AppPageComponent extends ResponsiveComponent implements OnInit, OnDestroy
{
    ResponsivePageComponent;

    constructor(
        injector: Injector,
        zone: NgZone)
    {
        super(zone);    
    }

    ngOnInit()
    {       
        this.IsSmallEnvironmentStream
            .subscribe
            (
                (isSmall: boolean) =>
                { 
                    if (isSmall)
                    { 
                        this.ResponsivePageComponent= AppPageSmallComponent;
                    }                   
                },
                (err) => { },
                () => {}
            );

        this.IsMediumEnvironmentStream
            .subscribe
            (
                (isMedium: boolean) =>
                { 
                    if (isMedium)
                    { 
                        this.ResponsivePageComponent = AppPageMediumComponent;
                    }                   
                },
                (err) => { },
                () => {}
            );

        this.IsLargeEnvironmentStream
            .subscribe
            (
                (isLarge: boolean) =>
                { 
                    if (isLarge)
                    { 
                        this.ResponsivePageComponent = AppPageLargeComponent;
                    }                   
                },
                (err) => { },
                () => {}
            );      
    }
}

Документация Angular для NgComponentOutlet показывает, что вы можете настроить дополнительный список проектируемых узлов для вставки в заполнители содержимого (ng-content). Я следовал примерам из документации Angular и мог вводить текстовые узлы в разные ng-content заполнители в моих родительских компонентах, и это работает для моих маленьких / средних / больших родительских компонентов.

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

ОБНОВЛЕНИЕ - 25.07.2017

Я создал этот плункер, демонстрирующий этот сценарий ( https://plnkr.co/edit/hOwRX1Ml6gX0S8em6nd5?p=preview).

В поршне, page-wrapper Компонент использует ngComponentOutlet для загрузки малого / среднего / большого компонента в зависимости от ширины устройства. Компонент page-wrapper внедряет статический контент в заполнители в каждом маленьком / среднем / большом компоненте, а не вводит контент маршрута со страницы 1.

Моя цель состоит в том, чтобы иметь компонент обертки страницы для удовлетворения адаптивных потребностей, таких как различные элементы навигации для небольших / средних / больших адаптивных проектов.

Итак, как "статический" контент может быть внедрен в динамически загружаемый компонент? ng-content заполнители пока что маршрут сгенерированного контента не внедряется в ng-content заполнители?

Спасибо за вашу помощь.

Источник

2 ответа

Решение

1) Вы можете определить ng-content помещает в ваш PageWrapperComponent и включает их в динамический компонент

страниц wrapper.component.html

<ng-container *ngComponentOutlet="ResponsiveComponent; 
                                content: [[el1],[el2]]"></ng-container>
<div #el1>
  <ng-content></ng-content>
</div>
<div #el2>
  <ng-content select="[named-injection-point]"></ng-content>
</div>

Пример плунжера

2) Вы также можете использовать переменные ссылки на шаблон (или пользовательскую директиву) в родительском компоненте и @ContentChild в PageWrapperComponent чтобы получить переходящие разделы.

страниц one.component.html

<page-wrapper>
    <section #mainPoint>
        <h2>Page One</h2>
    </section>
    <section #namedPoint>
        <h3>Page One Content:</h3>
        <p>Lorem ipsum dolor.</p>
    </section>
</page-wrapper>

страница-wrapper.component.ts

@ContentChild('mainPoint') mainPoint;
@ContentChild('namedPoint') namedPoint;

страниц wrapper.component.html

<ng-container *ngComponentOutlet="ResponsiveComponent; 
        content: [[mainPoint.nativeElement],[namedPoint.nativeElement]]"></ng-container>

Пример плунжера

Источник

Это то, что вы ожидаете? Я только что протестировал компонент среднего размера, кстати...

https://plnkr.co/edit/JgCQb4JVSHnHCueamerV?p=preview

Я думаю, это потому, что вы пытаетесь использовать ng-контент в компоненте, который не вызывается напрямую из компонента, содержащего контент, который вы хотите внедрить. Все, что я сделал, это добавил ng-контент в PageWrapperComponent с его собственным селектором, а затем передал его следующему компоненту с ожидаемым селектором.

PageWrapperComponent...

<ng-content select="[injected-content]" named-injection-point></ng-content>

Затем в PageOneComponent использовался новый селектор, который ожидает Оболочка

<section injected-content>
  <h3>Page One Content:</h3>
  <p>Lorem ipsum ...</p>
</section>

Теперь я могу видеть содержимое первой страницы под Джимми и Фредом, когда нажимаю на ссылку первой страницы.

Источник
Другие вопросы по тегам