[英]load component dynamically in angular4
我正在嘗試使用angular4的ng-dynamic-component動態加載組件。
我在瀏覽器控制台中不斷收到此錯誤。有人可以向我解釋我在做什么錯嗎?
我嘗試實現的動態組件是:
http://www.muller.tech/post/2017/08/04/angular4-dynamically-add-component/
systemjs.config.js
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: '/app',
'ng-dynamic-component': 'npm:/ng-dynamic-component/dist/src/index.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: 'main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
,
'ng-dynamic-component': { defaultExtension: 'js'},
'ng2-bs3-modal':
{ main: '/bundles/ng2-bs3-modal.js', defaultExtension: 'js' }
}
});
})(this);
app.module.ts
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app.routing';
import { DynamicModule } from 'ng-dynamic-component';
import { CommonModule } from '@angular/common';
import { CSSCarouselComponent } from './Components/Typescript/Slider';
import { CSSCarouselService } from './Components/Service/CarouselService';
import { EditorComponent } from './Components/Typescript/Editor';
import { DynamicComponent } from './Components/Typescript/ComponentDynamic';
@NgModule({
imports: [CommonModule, BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, AppRoutingModule, Ng2Bs3ModalModule, DynamicModule.withComponents([CSSCarouselComponent, EditorComponent])],
declarations: [AppComponent, MWRHomeComponent, MWRHomeNavbarComponent, CSSCarouselComponent, EditorComponent, DynamicComponent],
providers: [{ provide: APP_BASE_HREF, useValue: '/' }, CSSCarouselService],
bootstrap: [AppComponent]
})
export class AppModule { }
tsconfig.json
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"module": "commonjs",
"moduleResolution": "node",
"noImplicitAny": false,
"sourceMap": true,
"suppressImplicitAnyIndexErrors": true,
"target": "es5",
"importHelpers": true
},
"exclude": [
"node_modules/*"
]
}
包含ng-dynamic-component的節點模塊的文件夾結構:
1. nodemodules
--ng-dynamic-component
-dist
->bundles
->src
->>index.js
-script
-src
app.component.ts
import { Component } from "@angular/core"
//declare var jquery: any;
@Component({
selector: 'user-app',
templateUrl: '../../app/body.html'
})
export class AppComponent {
title = 'Tour of Heroes';
components = [
{ type: 'a' },
{ type: 'b' }
];
}
body.html
<h1>
{{title}}
</h1>
<body-content></body-content>
<editor></editor>
<div *ngFor='let component of components'>
<app-hopla [type]='component.type'></app-hopla>
</div>
ComponentDynamic.ts
import { Component, OnChanges, Input } from '@angular/core';
import { CSSCarouselComponent } from './Slider';
import { EditorComponent } from './Editor';
@Component({
selector: 'app-hopla',
template: `
<ndc-dynamic [ndcDynamicComponent]='selectedComponent'></ndc-dynamic>
`
})
export class DynamicComponent implements OnChanges {
@Input() type: string;
selectedComponent: any;
ngOnChanges() {
if (this.type) {
if (this.type === 'a') this.selectedComponent = CSSCarouselComponent;
if (this.type === 'b') this.selectedComponent = EditorComponent ;
}
}
}
您已在SystemConfig.js文件中為ng-dynamic-component提供了額外的反斜杠
map: {
// our app is within the app folder
app: '/app',
'ng-dynamic-component': 'npm:/ng-dynamic-component/dist/src/index.js'
},
如您在路徑中定義的
'npm:': 'node_modules/'
請刪除此多余的反斜杠。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.