如何在Angular 7 / Typescript中使用变量类名？

Question

创建一个Angular 7应用程序，我定义了一个用于不同实体的表单组件。

为此，我创建了一个可变路径：

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

这项工作很棒，但根据我想要创建的实体，我必须加载不同的对象。

所以我试图在Angular中使用变量类名实例化一个类。

我试着这样做：

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

但我收到此错误消息：

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

有没有办法在Angular 7 / TypeScript中使用变量类名？

我是否正确使用Angular？

Answer 1

首先：您需要使用类型为newObject的Object填充您的Variable。相反，你必须用Type newObject填充它。 （转储新的...（））

第二：你不能像这样使用路由器。

RoutesModule.forRoot(APP_Routes);

刚刚被召唤一次，之后你无法改变路线。您可以做的是定义更多路线或在末尾定义带变量的路线。例如'/ splitter /：id'，splitter是一个基于id返回不同组件的组件。但是使用子组件更容易实现。看到这个：

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

（取自Angular Documentation