我試圖加載不同的「父」組件,並通過在每個父組件中定位ng-content
將路由內容注入到這些不同的父組件中。基本上,每個父組件處理基於設備寬度(小/移動,中/平板和大/桌面)的導航和其他樣板材料。Angular 4 ngComponentOutlet加載動態組件,但路由內容未呈現
在我的應用程序中爲每條路徑生成的內容需要被轉移(注入)到父組件中。每條路線的內容均使用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) => { },
() => {}
);
}
}
角度對NgComponentOutlet文檔顯示可以針對可投影節點的可選列表插入內容(NG-內容)佔位符。我遵循了Angular的文檔中的例子,並且能夠將文本節點注入到我父組件中的不同ng-content
佔位符中,並且它適用於我的小/中/大父組件。
如何從我的路線獲取內容以注入這些不同的佔位符?看起來我真的很接近這個工作。我可以將靜態內容注入到參與者中,但我無法弄清楚如何將路由生成的內容注入佔位符。
更新 - 2017年7月25日
我創造了這個plunker demonstrating this scenario(https://plnkr.co/edit/hOwRX1Ml6gX0S8em6nd5?p=preview)。
在重載程序中,page-wrapper
組件使用ngComponentOutlet根據設備寬度加載小/中/大組件。頁面包裝器組件將靜態內容注入到每個小/中/大組件的佔位符中,而不是從第1頁注入路由內容。
我的目標是擁有一個頁面包裝器組件來處理響應式需求,如不同的導航元素小/中/大型響應式設計。
那麼,怎樣才能「靜態」的內容被注入到動態加載組件的ng-content
佔位但路線生成的內容不被注入ng-content
佔位符?
感謝您的幫助。
'router-outlet'沒有在HTML中定義。 – Aravind
你好!你能說什麼不起作用嗎?路由3不會通過選擇器傳輸ng-content?如果你將你的代碼中的代碼減少到最小程度,那將會很好。 – yurzui
@yurzui - 感謝您的反饋。我已經澄清了重拳。這名運動員現在只有2條路線。路由1使用「響應」父組件,其內容不會注入到父節點的內容佔位符中。路線2使用「無響應」的父組件,其內容確實被嵌入到其母公司的ng內容佔位符中。 –