创建一个 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?
最佳答案
首先:您需要填充您的变量,而不是使用 newObject 类型的对象。相反,您必须用 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 - 如何在 Angular 7/Typescript 中使用变量类名?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55267085/