Hur man använder variabel klassnamn i Angular 7/Typescript?

När jag skapade en Angular 7-app definierade jag en formulärkomponent som jag använder för olika enheter.

För att göra det skapar jag en variabel route :

  {path: ':entity/create', component: FormComponent}

Det här fungerar bra, men beroende på vilken enhet jag vill skapa, måste jag ladda olika objekt.

Så jag försöker instansiera en klass med ett variabelt klassnamn i Angular.

Jag försökte göra:

var object = eval('new myObject()');

Men jag fick detta felmeddelande:

ERROR Error: "Uncaught (in promise): ReferenceError: myObject is not defined
@http://localhost:4200/main.js line 3199 > eval:1:1
./src/app/form/form.component.ts/FormComponent.prototype.ngOnInit/</<@http://localhost:4200/main.js:3199:24
step@http://localhost:4200/vendor.js:120599:18
verb/<@http://localhost:4200/vendor.js:120580:53
__awaiter/<@http://localhost:4200/vendor.js:120573:71
ZoneAwarePromise@http://localhost:4200/polyfills.js:3268:29
__awaiter@http://localhost:4200/vendor.js:120569:12
./src/app/form/form.component.ts/FormComponent.prototype.ngOnInit@http://localhost:4200/main.js:3195:16
checkAndUpdateDirectiveInline@http://localhost:4200/vendor.js:58018:9
checkAndUpdateNodeInline@http://localhost:4200/vendor.js:59282:20
checkAndUpdateNode@http://localhost:4200/vendor.js:59244:16
debugCheckAndUpdateNode@http://localhost:4200/vendor.js:59878:19
debugCheckDirectivesFn@http://localhost:4200/vendor.js:59838:13
View_FormComponent_Host_0/<@ng:///AppModule/FormComponent_Host.ngfactory.js:9:5
debugUpdateDirectives@http://localhost:4200/vendor.js:59830:12
checkAndUpdateView@http://localhost:4200/vendor.js:59226:5
callViewAction@http://localhost:4200/vendor.js:59467:21
execEmbeddedViewsAction@http://localhost:4200/vendor.js:59430:17
checkAndUpdateView@http://localhost:4200/vendor.js:59227:5
callViewAction@http://localhost:4200/vendor.js:59467:21
execComponentViewsAction@http://localhost:4200/vendor.js:59409:13
checkAndUpdateView@http://localhost:4200/vendor.js:59232:5
callWithDebugContext@http://localhost:4200/vendor.js:60096:22
debugCheckAndUpdateView@http://localhost:4200/vendor.js:59798:12
./node_modules/@angular/core/fesm5/core.js/ViewRef_.prototype.detectChanges@http://localhost:4200/vendor.js:57607:13
./node_modules/@angular/core/fesm5/core.js/ApplicationRef.prototype.tick/<@http://localhost:4200/vendor.js:54038:58
./node_modules/@angular/core/fesm5/core.js/ApplicationRef.prototype.tick@http://localhost:4200/vendor.js:54038:13
next/<@http://localhost:4200/vendor.js:53929:99
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke@http://localhost:4200/polyfills.js:2749:17
onInvoke@http://localhost:4200/vendor.js:53218:24
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke@http://localhost:4200/polyfills.js:2748:37
./node_modules/zone.js/dist/zone.js/</Zone.prototype.run@http://localhost:4200/polyfills.js:2508:24
./node_modules/@angular/core/fesm5/core.js/NgZone.prototype.run@http://localhost:4200/vendor.js:53132:16
next@http://localhost:4200/vendor.js:53929:69
./node_modules/@angular/core/fesm5/core.js/EventEmitter.prototype.subscribe/schedulerFn<@http://localhost:4200/vendor.js:49434:36
./node_modules/rxjs/_esm5/internal/Subscriber.js/SafeSubscriber.prototype.__tryOrUnsub@http://localhost:4200/vendor.js:100897:13
./node_modules/rxjs/_esm5/internal/Subscriber.js/SafeSubscriber.prototype.next@http://localhost:4200/vendor.js:100835:17
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype._next@http://localhost:4200/vendor.js:100778:9
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype.next@http://localhost:4200/vendor.js:100755:13
./node_modules/rxjs/_esm5/internal/Subject.js/Subject.prototype.next@http://localhost:4200/vendor.js:100520:25
./node_modules/@angular/core/fesm5/core.js/EventEmitter.prototype.emit@http://localhost:4200/vendor.js:49418:54
checkStable@http://localhost:4200/vendor.js:53187:13
onHasTask@http://localhost:4200/vendor.js:53231:21
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.hasTask@http://localhost:4200/polyfills.js:2801:21
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype._updateTaskCount@http://localhost:4200/polyfills.js:2821:17
./node_modules/zone.js/dist/zone.js/</Zone.prototype._updateTaskCount@http://localhost:4200/polyfills.js:2649:34
./node_modules/zone.js/dist/zone.js/</Zone.prototype.runTask@http://localhost:4200/polyfills.js:2570:25
drainMicroTaskQueue@http://localhost:4200/polyfills.js:2959:25

Finns det ett sätt att använda ett variabelt klassnamn i Angular 7/TypeScript?

Använder jag Angular på fel sätt?

Svar #1

Först och främst: Du skulle behöva fylla din variabel inte med ett objekt av typen newObject. Istället var du tvungen att fylla den med typen newObject. (Släng bort new ...())

För det andra: Du kan inte använda routern på det här sättet.

RoutesModule.forRoot(APP_Routes);

kallas bara en gång, och du kan inte ändra rutterna efteråt. Vad du kan göra är att definiera fler rutter eller definiera en rutt med en variabel i slutet. Till exempel '/splitter/:id' med splitter som en komponent som returnerar olika komponenter baserat på id. Men det är mycket lättare att göra med barnkomponenter. Se detta:

const adminRoutes: Routes = [
      { path: 'admin', component: AdminComponent,
        children: [
            { path: 'crises', component: ManageCrisesComponent },
            { path: 'heroes', component: ManageHeroesComponent },
            { path: '', component: AdminDashboardComponent }
        ]}
];

(hämtat från Angular-dokumentationen)