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类型的对象填充变量。相反，您必须使用newObject类型填充它。（转储新的...（））

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

RoutesModule.forRoot(APP_Routes);

仅被调用一次，之后便无法更改路由。您可以做的是定义更多路线，或定义最后带有变量的路线。例如'/ splitter /：id'，其中splitter是一个组件，该组件根据id返回不同的Components。但是，使用子组件更容易做到。看到这个：

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

（取自Angular Documentation

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

1 个答案: