...
| Code Block |
|---|
| title | /spa-angular-minimal/browse/src/app/root.component.ts |
|---|
|
constructor(private http: HttpClient, private router: Router, private rendererContext: RendererContextService) {
this.rendererContext.setComponentMapping({
'angular-magnolia-int:pages/home': HomeComponent,
'angular-magnolia-int:pages/about': AboutComponent,
'angular-magnolia-int:components/title': TitleComponent,
'angular-magnolia-int:components/componentWithArea': ComponentWithAreaComponent,
'angular-magnolia-int:components/navigation': NavigationComponent,
});
} |
...
| Code Block |
|---|
| language | yml |
|---|
| title | <magnolia-resource-dir>/light-modules/sample-light-module/templates/components/title.yaml |
|---|
|
renderType: spa
title: Title
dialog: sample-light-module:components/title |
The mapping itself:
| Code Block |
|---|
| title | /magnolia-react-tutorial/browse/src/environments/mapping.js |
|---|
|
const COMPONENTS = {
'sample-light-module:components/title': Title,
'sample-light-module:components/text-image': TextImage,
'sample-light-module:components/nested': Nested,
'sample-light-module:components/navigation': Navigation
}; |
Additionally, to actually set the mappings, the COMPONENTS object must be passed as an argument of <Page directive>:
| Code Block |
|---|
| title | /magnolia-react-tutorial/src/app/component/HomePage.js |
|---|
|
<Page templateDefinitions={templateDefinitions} content={content} componentMappings={COMPONENTS}> |